/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

6 votes320 views3 answers
React native vector icons not showing
Javascript React
0 vote357 views3 answers
'App' is not defined react/jsx-no-undef
Javascript React
0 vote327 views1 answer
Why doesn't'$' work in react
Javascript React
0 vote343 views1 answer
React native scrollview full height
Javascript React
2 votes517 views2 answers
Select option in reactive forms
Javascript React
11 votes348 views2 answers
How to refresh the page using react
Javascript React
0 vote304 views1 answer
How to change style class by using onclick function with multiple buttons in react js
Javascript React
13 votes334 views4 answers
React deep copy
Javascript React
1 vote281 views1 answer
Circle progress react
Javascript React
5 votes298 views5 answers
Onclick react
Javascript React