[React-Hooks] React Hooks - useFullscreen

* useFullscreen

• useFullscreen은 어떤 요소를 풀스크린으로 보여주는 hooks입니다.

import { useRef } from "react";

const useFullscreen = (callback) => {
  const element = useRef();
  const triggerFull = () => {
    if (element.current) {
      element.current.requestFullscreen();
      if (callback && typeof callback === "function") {
        callback(true);
      }
    }
  };
  const exitFull = () => {
    document.exitFullscreen();
    if (callback && typeof callback === "function") {
      callback(false);
    }
  };
  return { element, triggerFull, exitFull };
};

const App = () => {
  const onFulls = (isFull) => {
    console.log(isFull ? "We are full" : "We are small");
  };
  const { element, triggerFull, exitFull } = useFullscreen(onFulls);
  return (
    <div style={{ height: "1000vh" }}>
      <div ref={element}>
        <img
          src="https://source.unsplash.com/random/200x200?sig=1"
          alt={"img"}
        />
        <button onClick={exitFull}>Exit fullscreen</button>
      </div>
      <button onClick={triggerFull}>Make fullscreen</button>
    </div>
  );
};

export default App;

• onClick으로 스크린을 full로 small로 변경가능하며 callback함수를 이용하여 이후 동작할 동작까지 지정이 가능하다.