import { RefObject , useEffect , useState } from 'react' ; interface IntersectionObserverOptions { rootMargin ? : string ; threshold ? : number ; } function param { React . RefObject < HTMLElement > } ref param { IntersectionObserverOptions } options returns { boolean } export const useIntersectionObserver = ( ref , options ) : boolean [ ] => { const [ isElementVisible , setIsElementVisible ] = useState ( false ) ; useEffect ( ( ) => { const observer = new IntersectionObserver ( ( [ entry ] ) => { setIsElementVisible ( entry . isIntersecting ) ; } , options ) ; if ( ref ?. current ) { observer . observe ( ref . current ) ; } return ( ) => { if ( ref ?. current ) { observer . unobserve ( ref . current ) ; } } ; } , [ ref , options ] ) ; return [ isElementVisible ] ; } ;