hide component blur react hooks
const React,{ useState, useMemo } = React
const usToggleOnFocus = (initialState = false) => {
const [show, toggle] = useState(initialState);
const eventHandlers = useMemo(() => ({
onFocus: () => toggle(true),
onBlur: () => toggle(false),
}), []);
return [show, eventHandlers];
}
const Demo = () => {
const [show, eventHandlers] = usToggleOnFocus();
return (
<div>
<input {...eventHandlers} />
{show && <div>Content</div>}
</div>
);
};
ReactDOM.render(
<Demo />,
demo
);