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.

Property	Type	Description
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
on	{ enterFullscreen?: () => void; exitFullscreen?: () => void; }	Lifecycle callbacks. `enterFullscreen` - a callback called when the lightbox enters fullscreen mode `exitFullscreen` - a callback called when the lightbox exits fullscreen mode

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(),
    }}
    // ...
  />
);

Property	Type	Description
fullscreen	boolean	Current fullscreen status.
disabled	boolean \| undefined	If `true`, fullscreen features are not available.
enter	() => void	Enter fullscreen mode.
exit	() => void	Exit 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

Sandbox

Edit on StackBlitz