import React , { FC , useEffect , useRef , useState } from 'react' ; import * as Styled from './Slide.styles' ; import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver' ; export interface Props { anchorID : string ; bgColor : string ; height : string ; } function param { string } anchorID param { string } bgColor param { string } height param { ReactNode } children returns { JSX . Element } const Slide = ( { anchorID , bgColor , height , children , } ) : JSX . Element => { const containerRef = useRef < HTMLDivElement > ( null ) ; const [ isElementVisible ] = useIntersectionObserver ( containerRef , { threshold : 0.35 , } ) ; const [ isOnScreen , setIsOnScreen ] = useState ( false ) ; useEffect ( ( ) => { if ( isElementVisible && ! isOnScreen ) setIsOnScreen ( true ) ; } , [ isElementVisible , isOnScreen ] ) ; return ( < Styled . Container id = { anchorID } ref = { containerRef } bgColor = { bgColor } height = { height } > { isOnScreen ? children : '' } < /Styled.Container>); } ; export default Slide ;