import { useEffect , useState } from "react" ; import { useIntersectionContext } from "./IntersectionContext" ; const useInView = ( ) => { const { observe } = useIntersectionContext ( ) ; const [ intersectionRef , setIntersectionRef ] = useState < Element | null > ( null ) ; const [ inView , setInView ] = useState < boolean > ( false ) ; useEffect ( ( ) => { if ( ! intersectionRef ) { return ; } return observe ( intersectionRef , ( { intersectionRatio } ) => { setInView ( intersectionRatio > 0 ) ; } ) ; } , [ intersectionRef , observe ] ) ; return { inView , intersectionRef : setIntersectionRef } ; } ; export default useInView ;