import { RefObject , useEffect , useState } from 'react' ; export const useLazyLoadWithIntersectionObserver = ( ref , { distancePXWindowCallComponent } ) => { const [ showComponent , setShowComponent ] = useState ( false ) ; useEffect ( ( ) => { try { const callBackObserver = ( entries ) => { entries . forEach ( entry => { if ( entry . isIntersecting ) { observer . disconnect ( ) ; setShowComponent ( true ) ; } } ) ; } ; const options = { root : window . document , rootMargin : `0px 0px ${ distancePXWindowCallComponent }px 0px` } ; const observer = new IntersectionObserver ( callBackObserver , options ) ; ! ! ref . current && observer . observe ( ref . current ) ; } catch ( e ) { console . log ( e ) ; setShowComponent ( true ) ; } } , [ distancePXWindowCallComponent , ref ] ) ; return { showComponent } ; } ;