use-fullscreen

Enter/exit fullscreen mode with given element or entire page

Import

Usage

use-fullscreen allows to enter/exit fullscreen for given element using the Fullscreen API. By default, if you don't provide ref, the hook will target document.documentElement:

import { useFullscreen } from '@mantine/hooks';
import { Button } from '@mantine/core';

function Demo() {
  const { toggle, fullscreen } = useFullscreen();

  return (
    <Button onClick={toggle} color={fullscreen ? 'red' : 'blue'}>
      {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
    </Button>
  );
}

Custom target element

The hook returns an optional ref function that can be passed to an element to act as root. Be sure to follow best practices to not confuse or trap the end user:

For demo
import { useFullscreen } from '@mantine/hooks';
import { Button, Stack } from '@mantine/core';

function RefDemo() {
  const { ref, toggle, fullscreen } = useFullscreen();

  return (
    <Stack align="center">
      <img
        ref={ref}
        src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-4.png"
        alt="For demo"
        width={200}
      />
      <Button onClick={toggle} color={fullscreen ? 'red' : 'blue'}>
        {fullscreen ? 'Exit Fullscreen' : 'View Image Fullscreen'}
      </Button>
    </Stack>
  );
}

Definition

function useFullscreen<T extends HTMLElement = any>(): {
  readonly ref: (element: T | null) => void;
  readonly toggle: () => Promise<void>;
  readonly fullscreen: boolean;
};