A React hook to manage fullscreen state
npm install use-fullscreen-hookbash
npm install use-fullscreen
`
Or with Yarn:
`bash
yarn add use-fullscreen
`
Usage
To use this hook, you need to import it into your React component, create a ref for the element you want to control, and call the hook with that ref.
$3
`tsx
import React, { useRef } from "react";
import useFullscreen from "use-fullscreen";
const FullscreenComponent = () => {
const elementRef = useRef(null);
const { isFullscreen, enter, exit, toggle } = useFullscreen(elementRef);
return (
ref={elementRef}
style={{ width: "100%", height: "300px", backgroundColor: "lightblue" }}
>
This is a full-screenable element!
Hook API
`ts
interface FullscreenApi {
isFullscreen: boolean;
enter: () => void;
exit: () => void;
toggle: () => void;
}
function useFullscreen(elementRef: React.RefObject): FullscreenApi;
``