[TIL] useFadeIn 와 useScroll

import React, { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'

const useFadein = (duration = 1, delay = 0) => {
  if (typeof duration !== 'number' || typeof delay !== 'number') {
    return
  }

  const element = useRef()
  useEffect(() => {
    if (element.current) {
      const { current } = element
      current.style.opacity = 1
      current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`
    }
  }, [])
  return { ref: element, style: { opacity: 0 } }
}

const App = () => {
  const fadeInH1 = useFadein(3, 3)
  const fadeInP = useFadein(3, 7)
  console.log(fadeInH1)
  return (
    <div className="App">
      <h1 {...fadeInH1}>Hello</h1>
      <p {...fadeInP}>Wellcome! Nice too meet you!</p>
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(
  <App />,

  rootElement
)

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