import { useState , useCallback , useEffect } from 'react' ; export function isFullScreen ( ) { return document . fullscreenElement !== null ; } export function isFullScreenElement ( el = document . documentElement ) { return document . fullscreenElement === el ; } export function closeFullScreen ( ) { if ( document . exitFullscreen !== undefined ) { return document . exitFullscreen ( ) ; } } export function useFullScreen ( ref ? ) { const [ fullScreen , setFullScreen ] = useState ( isFullScreen ( ) ) ; const openFullScreen = useCallback ( ( ) => { const el = ( ref && ref . current ) || document . documentElement ; if ( el . requestFullscreen !== undefined ) { return el . requestFullscreen ( ) ; } } , [ ref ] ) ; useEffect ( ( ) => { const handleChange = ( ) => { setFullScreen ( isFullScreen ( ) ) ; } ; document . addEventListener ( 'fullscreenchange' , handleChange , true ) ; return ( ) => { document . removeEventListener ( 'fullscreenchange' , handleChange ) ; } ; } , [ ] ) ; return { fullScreen , open : openFullScreen , close : closeFullScreen , toggle : fullScreen ? closeFullScreen : openFullScreen , } ; }