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
fullscreen

{
  ref?: React.ForwardedRef​<FullscreenRef>;
  auto?: boolean;
}

  • ref - Fullscreen plugin ref. See Fullscreen Ref for details.
  • auto - if true, enter fullscreen mode automatically when the lightbox opens
render

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

Custom render functions:

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

Fullscreen Ref

The Fullscreen plugin provides a ref object to control the plugin features externally.

// Fullscreen ref usage example

const fullscreenRef = React.useRef(null);

// ...

return (
  <Lightbox
    plugins={[Fullscreen]}
    fullscreen={{ ref: fullscreenRef }}
    on={{
      click: () => fullscreenRef.current?.enter(),
    }}
    // ...
  />
);
PropertyTypeDescription
fullscreenbooleanCurrent fullscreen status.
disabledboolean | undefined
If true, fullscreen features are not available.
enter() => voidEnter fullscreen mode.
exit() => voidExit fullscreen mode.

Example

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

// ...

return (
  <Lightbox
    plugins={[Fullscreen]}
    // ...
  />
);

Live Demo

CodeSandbox

Edit on CodeSandbox