import { MutableRefObject , useEffect , useState } from 'react' ; function useIsFocused ( ref ) { const [ isFocused , setIsFocused ] = useState ( false ) ; useEffect ( ( ) => { const listener = ( event ) => { if ( ! ref . current || ref . current . contains ( event . target ) ) { event . preventDefault ( ) ; setIsFocused ( true ) ; } else { setIsFocused ( false ) ; } } ; window . addEventListener ( 'mousedown' , listener ) ; window . addEventListener ( 'touchstart' , listener ) ; return ( ) => { window . removeEventListener ( 'mousedown' , listener ) ; window . removeEventListener ( 'touchstart' , listener ) ; } ; } , [ ref ] ) ; return { isFocused , setIsFocused } ; } export default useIsFocused ;