/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

3 votes92 views1 answer
Module not found: can't resolve 'react' in 'c:\users\pavlos\desktop\reactjs\hwr\reactproject2\src'
Javascript React
2 votes111 views1 answer
Append a query string to the url react
Javascript React
64 votes146 views7 answers
React router
Javascript React
0 vote98 views1 answer
Cannot read properties of undefined (reading 'length') selectionlist react native
Javascript React
0 vote123 views1 answer
How to use empty href link in reactjs
Javascript React
0 vote105 views1 answer
Gradlew command not found react native
Javascript React
0 vote110 views1 answer
React i18n with parameeter
Javascript React
0 vote139 views1 answer
Donwload data from react js in json file
Javascript React
0 vote116 views3 answers
React-hook-form input
Javascript React
5 votes117 views3 answers
Get url react
Javascript React