showing results for - "hide component blur react hooks"
Claudia
29 Apr 2019
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);