1* usage
2
3const useFullscreen = callback => {
4  const element = useRef();
5  const runCb = isFull => {
6    if (callback && typeof callback === "function") {
7      callback(isFull);
8    }
9  };
10  const triggerFull = () => { // full화면으로 변환하는 함수
11    if (element.current) {
12      if (element.current.requestFullscreen) { // chrome, safari
13        element.current.requestFullscreen();
14      } else if (element.current.mozRequestFullScreen) { // firefox
15        element.current.mozRequestFullScreen();
16      } else if (element.current.webkitRequestFullscreen) { // opera
17        element.current.webkitRequestFullscreen();
18      } else if (element.current.msRequestFullscreen) { // microsoft
19        element.current.msRequestFullscreen();
20      }
21      runCb(true);
22    }
23  };
24  const exitFull = () => { // full화면을 해제하는 함수
25    document.exitFullscreen();
26    if (document.exitFullscreen) {
27      document.exitFullscreen();
28    } else if (document.mozCancelFullScreen) {
29      document.mozCancelFullScreen();
30    } else if (document.webkitExitFullscreen) {
31      document.webkitExitFullscreen();
32    } else if (document.msExitFullscreen) {
33      document.msExitFullscreen();
34    }
35    runCb(false);
36  };
37  return { element, triggerFull, exitFull };
38};
39
40const App = () => {
41  const onFullS = isFull => { // callback 함수
42    console.log(isFull ? "Full" : "Small");
43  };
44  const { element, triggerFull, exitFull } = useFullscreen(onFullS);
45  return (
46    <div className="App">
47      <h1>Hello</h1>
48      <div ref={element}>
49        <img src="https://hjban-dev.github.io/public/logo.png"/>
50        <button onClick={exitFull}>exitFull</button>
51        <button onClick={triggerFull}>triggerFull</button>
52      </div>
53    </div>
54  );
55};