Enter/exit fullscreen with given element


Hook 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 theme = useMantineTheme();
const { toggle, fullscreen } = useFullscreen();
return (
<Button onClick={toggle} color={fullscreen ? 'red' : 'blue'}>
{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}

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 (
alt="Unsplash Image to make Fullscreen"
<Button onClick={toggle} color={fullscreen ? 'red' : 'blue'}>
{fullscreen ? 'Exit Fullscreen' : 'View Image Fullscreen'}


function useFullscreen<T extends HTMLElement = any>(): {
readonly ref: (element: T | null) => void;
readonly toggle: () => Promise<void>;
readonly fullscreen: boolean;
Build fully functional accessible web applications with ease
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback