[react] useScroll, useFullScreen

1. useScroll

 

스크롤의 움직임을 감지하는 hook

import "./styles.css";
import { useState, useEffect, useRef } from "react";

const useScroll = () => {
  const [state, setState] = useState({
    x: 0,
    y: 0
  })
  
  const onScroll = () => {
    setState({y: window.scrollY, x:  window.scrollX});
  }
  
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [])
  
  return state;
}

function App() {

  const { y } = useScroll();

  return (
    <div className="App" style={{height: "1000vh"}}>
      <h1 style={{position: "fixed", color: y > 100 ? "red" : "blue"}}>Hi</h1>
    </div>
  );
}

export default App;

 

 

2. useFullScreen

 

버튼을 클릭하면 풀스크린이 되는 hook

브라우저에 따라서 requestFullscreen 명령어가 달라질 수 있다

import "./styles.css";
import { useState, useEffect, useRef } from "react";

const useFullScreen = () => {
  const element = useRef();
  const tiriggerFull = () => {
    if (element.current) {
      element.current.requestFullscreen();
    }
  };
  const exitFull = () => {
    const checkFullScreen = document.fullscreenElement;
    if (checkFullScreen !== null) {
      document.exitFullscreen();
    }
    // fullscreen 상태인지 체크 후 맞다면 exit(에러 방지)
  };
  return { element, tiriggerFull, exitFull };
};

function App() {
  const { element, tiriggerFull, exitFull } = useFullScreen();

  return (
    <div className="App">
      <div ref={element} style={{background-color: "pink"}}>
        <img src="https://via.placeholder.com/300" alt="img" />
      </div>
      <button onClick={tiriggerFull}>Make Fullscreen</button>
      <button onClick={exitFull}>exit Fullscreen</button>
    </div>
  );
}

export default App;