FullscreenButtoncomponent

FullscreenButton({ target = "body, figure", ...props }): ReactElement | null
ParamType
propsunknown
required
Return
ReactElement | null
Rendered fullscreen toggle button, or null when fullscreen is unavailable.

Button to toggle the surrounding <figure> element or <body> element in/out of fullscreen mode.

  • Renders null when the browser does not support the Fullscreen API.
  • Tracks fullscreen state so the icon and title toggle between enter/exit.
  • Parent can be identified by props.target, but defaults to figure, body does not exist, the button will do nothing when clicked.
  • The <Figure> and <Video> components are rendered as <figure> so this works out the box with both of these.
  • If not contained in a <figure> by default the

Examples

<Video><video src="/clip.mp4" /><FullscreenButton /></Video>