[React] React Hooks (9) - useFullscreen

useFullscreen

이미지를 Fullscreen으로 만드는 hooks를 만들어보자

 

useFullscreen

Make fullscreen 버튼 클릭시 이미지 fullscreen, Exit fullscreen 버튼 클릭시 fullscreen 빠져나오기

const useFullscreen = () => {
  const element = useRef();
  const triggerFull = () => {
    if (element.current) {
      element.current.requestFullscreen();
    }
  };
  const exitFull = () => {
    document.exitFullscreen();
  };
  return { element, triggerFull, exitFull };
};

const App = () => {
  const { element, triggerFull, exitFull } = useFullscreen();
  return (
    <div className="App" style={{ height: "1000vh" }}>
      <div ref={element}>
        <img src="https://image.genie.co.kr/Y/IMAGE/IMG_ARTIST/080/044/692/80044692_1664500054593_28_600x600.JPG"></img>
      </div>
      <button onClick={exitFull}>Exit fullscreen</button>
      <button onClick={triggerFull}>Make fullscreen</button>
    </div>
  );
};