import { useEffect , useMemo , useState } from 'react' ; import type { ComponentType , PropsWithChildren } from 'react' ; export const useToggledComponent = < P extends { } > ( ToggledComponent , toggle ) => useMemo ( ( ) => { return ( props ) => toggle ? < ToggledComponent { ... props } / > : props . children ? < > { props . children } < /> : null; } , [ ToggledComponent , toggle ] ) ; export const useToggledControl = < P extends { } > ( ToggledComponent , keycode ) => { const [ toggle , setToggle ] = useState ( false ) ; useEffect ( ( ) => { const listener = ( { key } ) => { if ( key === keycode ) setToggle ( ! toggle ) ; } ; addEventListener ( 'keyup' , listener ) ; return ( ) => removeEventListener ( 'keyup' , listener ) ; } ) ; return useToggledComponent ( ToggledComponent , toggle ) ; } ;