1const React,{ useState, useMemo } = React
2
3const usToggleOnFocus = (initialState = false) => {
4 const [show, toggle] = useState(initialState);
5
6 const eventHandlers = useMemo(() => ({
7 onFocus: () => toggle(true),
8 onBlur: () => toggle(false),
9 }), []);
10
11 return [show, eventHandlers];
12}
13
14const Demo = () => {
15 const [show, eventHandlers] = usToggleOnFocus();
16
17 return (
18 <div>
19 <input {...eventHandlers} />
20 {show && <div>Content</div>}
21 </div>
22 );
23};
24
25ReactDOM.render(
26 <Demo />,
27 demo
28);