import { useEffect } from 'react' ; interface Opts { isEnabled ? : boolean ; } type Ref = React . RefObject < HTMLElement > ; const array = [ ] ; param ref param handler export function useOutsideClick ( ref , handler , { isEnabled = true } = { } ) { const refs = array . concat ( ref ) ; useEffect ( ( ) => { const listener = ( event ) => { if ( ! isEnabled ) return ; if ( refs . some ( ( ref ) => ref ?. current ?. contains ( event . target ) ) ) return ; handler ( event ) ; } ; if ( isEnabled ) { document . addEventListener ( 'mousedown' , listener ) ; document . addEventListener ( 'touchstart' , listener ) ; } return ( ) => { document . removeEventListener ( 'mousedown' , listener ) ; document . removeEventListener ( 'touchstart' , listener ) ; } ; } , [ ref , ... refs , isEnabled , handler ] ) ; }