import { useState , useEffect } from 'react' ; import 'intersection-observer' ; const useActiveSection = ( setActiveSection ) => { const [ observer , setObserver ] = useState < IntersectionObserver | undefined > ( ) ; useEffect ( ( ) => { if ( ! setActiveSection ) { return ; } const map = { } ; const keys = [ ] ; const handleIntersect = ( elements ) => { elements . forEach ( ( element ) => { const { target , intersectionRatio } = element ; if ( ! ( target instanceof HTMLElement ) ) { return ; } const id = target . dataset . targetId ; if ( ! id ) { return ; } if ( ! map [ id ] ) { keys . push ( id ) ; } map [ id ] = intersectionRatio ; } ) ; const { id } = keys . reduce < { value : number ; id : string ; } > ( ( cur , id ) => { const otherValue = map [ id ] ; if ( otherValue > cur . value ) { return { value : otherValue , id } ; } return cur ; } , { value : map [ keys [ 0 ] ] , id : keys [ 0 ] } ) ; setActiveSection ( id ) ; } ; const options = { root : null , rootMargin : '0px' , threshold : [ 0.5 , 0.99 ] , } ; const observer = new IntersectionObserver ( handleIntersect , options ) ; setObserver ( observer ) ; return ( ) => { observer . disconnect ( ) ; } ; } , [ setActiveSection ] ) ; return observer ; } ; export default useActiveSection ;