/Javascript/React/HandleClickoutside custom hook react

HandleClickoutside custom hook react

import { useState, useEffect, useRef } from 'react';

export default function useComponentVisible(initialIsVisible) {
    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
    const ref = useRef<HTMLDivElement>(null);

    const handleHideDropdown = (event: KeyboardEvent) => {
        if (event.key === 'Escape') {
            setIsComponentVisible(false);
        }
    };

    const handleClickOutside = (event: Event) => {
        if (ref.current && !ref.current.contains(event.target as Node)) {
            setIsComponentVisible(false);
        }
    };

    useEffect(() => {
        document.addEventListener('keydown', handleHideDropdown, true);
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('keydown', handleHideDropdown, true);
            document.removeEventListener('click', handleClickOutside, true);
        };
    });

    return { ref, isComponentVisible, setIsComponentVisible };
}

Source: stackoverflow.com

Similar codes

5 votes274 views2 answers
Add object in array state react
Javascript React
1 vote193 views1 answer
React-redux todo list
Javascript React
0 vote157 views1 answer
Loading react circular progress
Javascript React
0 vote168 views1 answer
Form- text area react
Javascript React
0 vote153 views2 answers
This.webview.postmessage is not a function reactnative
Javascript React
0 vote195 views1 answer
Remove console messages of react-i18next
Javascript React
0 vote167 views1 answer
Implement cai webchat in react native
Javascript React
0 vote178 views1 answer
Reactjs events list
Javascript React
7 votes222 views3 answers
How to route react from laravel
Javascript React
13 votes173 views4 answers
Passing data in react router history,push
Javascript React