custorm hooks

70 阅读1分钟
import { useState, useEffect } from 'react' 
//判断当前节点是否出现在可视区域
function useIsVisibility(ref){
    const [state,setState]=useState(false)
    useEffect(()=>{
        console.log("useIsVisibility")
    })
    //判断节点和是否在客户端
    if(ref&&IntersectionObserver){
        const intersectionObserver = new IntersectionObserver((entries) => {
            if (entries[0].intersectionRatio <= 0){
                console.log("在视野外")
                setState(false)
                return false
            } else{
                console.log("在视野内")
                setState(true)
                return true
            }
          });
        intersectionObserver.observe(ref);
    }
    return state
}

//获取鼠标位置
function useMousePosition() { 
  const [x, setX] = useState(0) 
  const [y, setY] = useState(0) 
  useEffect(() => { function mouseMoveHandler(event) 
  { 
    // event.clientX 可以拿到鼠标横坐标和纵坐标的位置 
    setX(event.clientX)
    setY(event.clientY) } 
    // 绑定事件 
    document.body.addEventListener('mousemove', mouseMoveHandler) 
    // 解绑事件 
    return () => document.body.removeEventListener('mousemove', mouseMoveHandler) 
  }, []) 
  return [x, y] 
}  
export default useMousePosition