Skip to main content

useFullscreen()

The useFullscreen() hook can toggle between entering fullscreen mode and exiting fullscreen mode.

Import​

import { useFullscreen } from 'react-haiku';

Usage​

Is in Fullscreen Mode: False

For Overall Document​


import { useEffect, useRef } from 'react'
import { useFullscreen } from 'react-haiku';

export const Component = () => {
  const documentRef = useRef(null);

  useEffect(() => {
    documentRef.current = document.documentElement;
  }, []);

  const {isFullscreen, toggleFullscreen } = useFullscreen(documentRef);
  return (
      <div>
        <b>Is in Fullscreen Mode: {isFullscreen ? "True" : "False"}</b>
        <button onClick={toggleFullscreen}>Toggle Fullscreen!</button>
      </div>
  );
}

For Specific Element​


import { useEffect } from 'react'
import { useFullscreen } from 'react-haiku';

export const Component = () => {
  const elementRef = useRef(null);
  const {isFullscreen, toggleFullscreen } = useFullscreen(elementRef);
  return (
      <div ref={elementRef}>
        <b>Is in Fullscreen Mode: {isFullscreen ? "True" : "False"}</b>
        <button onClick={toggleFullscreen}>Toggle Fullscreen!</button>
      </div>
  );
}

API​

This hook accepts the following arguments:

  • targetRef - a reference to the DOM element you want to toggle fullscreen for.