/Javascript/React/Hide component blur react hooks

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
);

Source: stackoverflow.com

Similar codes

0 vote117 views1 answer
Decrease touchableopacity in react native
Javascript React
0 vote119 views1 answer
React native gridient button
Javascript React
0 vote114 views1 answer
UseFetch custom hook for React
Javascript React
0 vote139 views1 answer
Nested navigation react native
Javascript React
-2 votes117 views1 answer
React native search bar
Javascript React
5 votes119 views1 answer
Redirect in netlify react
Javascript React
0 vote123 views1 answer
Rn push notification No task registered for key ReactNativeFirebaseMessagingHeadlessTask
Javascript React
31 votes125 views6 answers
React Sass
Javascript React
0 vote68 views1 answer
React create element from string
Javascript React
0 vote247 views1 answer
Canvas js in react
Javascript React