use-fullscreen

Enter/exit fullscreen with given element
Import

Usage

use-fullscreen allows to enter/exit fullscreen for given element using the Fullscreen API. By default, if you don't provide ref, 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 root element

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:

Unsplash Image to make Fullscreen
import { useFullscreen } from '@mantine/hooks';
import { Button, Image } from '@mantine/core';
function Demo() {
const { ref, toggle, fullscreen } = useFullscreen();
return (
<>
<Image
ref={ref}
src="https://unsplash.com/image.jpg"
alt="Unsplash Image to make Fullscreen"
width={200}
/>
<Button onClick={toggle} color={fullscreen ? 'red' : 'blue'}>
{fullscreen ? 'Exit Fullscreen' : 'View Image Fullscreen'}
</Button>
</>
);
}

Definition

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