Fullscreen Plugin

Fullscreen plugin adds support for fullscreen lightbox mode utilizing the browser's Fullscreen API. Please note that fullscreen mode is not supported in some modern browsers (i.e., Safari on iPhone) or within iframes. Fullscreen plugin detects the availability of fullscreen mode and doesn't display the fullscreen button in browsers that do not support fullscreen mode.

Documentation

The plugin adds the following Lightbox properties.

PropertyTypeDescription
fullscreenboolean
if true, enter fullscreen mode automatically when the lightbox opens
render

{
  iconEnterFullscreen?: () => React.ReactNode;
  iconExitFullscreen?: () => React.ReactNode;
  buttonFullscreen?: () => React.ReactNode;
}

Custom render functions:

  • iconEnterFullscreen - render custom Enter Fullscreen icon
  • iconExitFullscreen - render custom Exit Fullscreen icon
  • buttonFullscreen - render custom Enter/Exit Fullscreen button

Example

import Lightbox from "yet-another-react-lightbox";
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import "yet-another-react-lightbox/styles.css";

// ...

<Lightbox
    open={open}
    close={() => setOpen(false)}
    slides={slides}
    plugins={[Fullscreen]}
/>

Live Demo

CodeSandbox

Edit on CodeSandbox