/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

4 votes382 views3 answers
React native keystore
Javascript React
6 votes336 views3 answers
React native vector icons not working
Javascript React
0 vote383 views1 answer
.env not working on react
Javascript React
10 votes379 views1 answer
Dimensions react native
Javascript React
105 votes417 views1 answer
Install and run react js project...
Javascript React
0 vote390 views2 answers
Get selected value on componentdidmount reactjs
Javascript React
1 vote397 views1 answer
React native image disable fade in onload
Javascript React
0 vote382 views1 answer
React yup password with number string and uppercase
Javascript React
1 vote374 views1 answer
React native new project mac
Javascript React
0 vote336 views1 answer
Open xcode shorthand react native
Javascript React