index.js

/*
 * @Title:
 * @Author: hongmye
 * @Date: 2023-01-10 11:18:55
 */
import { useCallback, useEffect, useRef, useState } from 'react';

const useFullScreen = needFullscreen => {
  const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement);
  const ref = useRef();

  useEffect(() => {
    const handleToggleFullScreen = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };
    document.addEventListener('fullscreenchange', handleToggleFullScreen);
    return () => {
      document.removeEventListener('fullscreenchange', handleToggleFullScreen);
    };
  }, []);

  const handleFullScreen = useCallback(() => {
    ref.current?.requestFullscreen && ref.current?.requestFullscreen();
  }, []);

  const handleExitFullScreen = useCallback(() => {
    document.exitFullscreen();
  }, []);

  useEffect(() => {
    needFullscreen && handleFullScreen();
  }, [handleFullScreen, needFullscreen]);

  return [ref, isFullscreen, handleFullScreen, handleExitFullScreen];
};

export default useFullScreen;