import { useEffect , useRef , useState } from 'react' ; export const useDetectTransitionEnd = ( element , transitionEndPropName ) => { const [ isTransitionEnd , setIsTransitionEnd ] = useState ( false ) ; const onTransitionEnd = ( e ) => e . propertyName === transitionEndPropName && setIsTransitionEnd ( true ) ; const onTransitionStart = ( e ) => e . propertyName === transitionEndPropName && setIsTransitionEnd ( false ) ; useEffect ( ( ) => { if ( element ) { element . addEventListener ( 'transitionend' , onTransitionEnd ) ; element . addEventListener ( 'transitionstart' , onTransitionStart ) ; return ( ) => { element . removeEventListener ( 'transitionend' , onTransitionEnd ) ; element . removeEventListener ( 'transitionstart' , onTransitionStart ) ; } ; } } , [ element ] ) ; return isTransitionEnd ; } ;