use-fullscreen

Enter/exit fullscreen with given element
Import

Usage

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'}
</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
elementRef={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;
};
Build fully functional accessible web applications with ease
Feedback
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