jsx import { jsx } from '@emotion/core' ; import React , { useEffect , useRef } from 'react' ; export interface IsInViewportProps < T = HTMLDivElement > extends React . HTMLProps < T > { checkViewportOnce ? : boolean ; disabled ? : boolean ; onEnterViewport ? : ( ) => void ; } export const IsInViewport = ( { onEnterViewport , disabled = false , checkViewportOnce = false , ... props } ) => { const element = useRef < HTMLDivElement > ( ) ; useEffect ( ( ) => { let observer = undefined ; if ( onEnterViewport && ! disabled ) { observer = new IntersectionObserver ( ( [ { isIntersecting } ] ) => { if ( isIntersecting ) { if ( checkViewportOnce ) { observer . disconnect ( ) ; } if ( onEnterViewport && ! disabled ) { onEnterViewport ( ) ; } } } ) ; observer . observe ( element . current ) ; } return ( ) => { if ( observer ) { observer . disconnect ( ) ; } } ; } , [ onEnterViewport ] ) ; return < div ref = { element } { ... props } />; } ;