import { MutableRefObject , useEffect , useState } from "react" ; export function useOnScreen < T extends Element > ( ref , rootMargin = "0px" ) { const [ isIntersecting , setIntersecting ] = useState < boolean > ( false ) ; useEffect ( ( ) => { const observer = new IntersectionObserver ( ( [ entry ] ) => { setIntersecting ( entry . isIntersecting ) ; } , { rootMargin , } ) ; if ( ref . current ) { observer . observe ( ref . current ) ; } return ( ) => { if ( ! ref . current ) return ; observer . unobserve ( ref . current ! ) ; } ; } , [ ] ) ; return isIntersecting ; }