handleclickoutside custom hook react

Solutions on MaxInterview for handleclickoutside custom hook react by the best coders in the world

Search
showing results for - "handleclickoutside custom hook react"
Federico
01 May 2016
1import { useState, useEffect, useRef } from 'react';
2
3export default function useComponentVisible(initialIsVisible) {
4    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
5    const ref = useRef<HTMLDivElement>(null);
6
7    const handleHideDropdown = (event: KeyboardEvent) => {
8        if (event.key === 'Escape') {
9            setIsComponentVisible(false);
10        }
11    };
12
13    const handleClickOutside = (event: Event) => {
14        if (ref.current && !ref.current.contains(event.target as Node)) {
15            setIsComponentVisible(false);
16        }
17    };
18
19    useEffect(() => {
20        document.addEventListener('keydown', handleHideDropdown, true);
21        document.addEventListener('click', handleClickOutside, true);
22        return () => {
23            document.removeEventListener('keydown', handleHideDropdown, true);
24            document.removeEventListener('click', handleClickOutside, true);
25        };
26    });
27
28    return { ref, isComponentVisible, setIsComponentVisible };
29}
30
source
similar questions
react hooks component re render when button pressreact js form radio input using hooksreact select with react hook form cotrollerreact onclick parameterhow to add a click handler in react jstake site to top after clicking in reactadd event listener react hooksonclick on fragment reactreact why onclick property function trigger without clickhow to set up a success message show up if form is submitted in react hooksonclick multiple functions reactevent listener for functional componenttoggle class onscroll hook reactpassing event handler to useeffeectchrome back button click event reacthow to add oncklick button reactreact hook form submit outside formreact hook form example stack overflowreact get input value on button click functional componentreact form hook trigger is not a function
queries leading to this page
handleclickoutside custom hook reactreact custom hook for onclick eventshandler react custom hookon outside click hide component react hooksreact component onclick call custom hookreact hook onclickoutsideon outside click hide div react hooksaccesible on click outside hookcustom hook with onclickreact custom handleclickoutsidereact onclick use custom hookreact hook create component on clickhandleclickoutside custom hook react