/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

0 vote346 views1 answer
Card react native
Javascript React
0 vote313 views1 answer
Laravel react 404 routes
Javascript React
1 vote333 views1 answer
Create functional component react
Javascript React
0 vote346 views2 answers
'Navbar' is not defined react/jsx-no-undef
Javascript React
0 vote302 views1 answer
How to make this transform with React-Native? https://stackoverflow.com/questions/37538303/how-to-make-this-transform-with-react-native
Javascript React
0 vote343 views3 answers
React animation
Javascript React
2 votes337 views2 answers
React native scrollview detect end
Javascript React
1 vote362 views5 answers
Enzyme adapter react 17
Javascript React
3 votes333 views1 answer
Force update react hooks
Javascript React
2 votes349 views2 answers
Unable to resolve module react-navigation
Javascript React