/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 votes398 views1 answer
React native activityindicator
Javascript React
1 vote364 views1 answer
ERESOLVE unable to resolve dependency tree Found: [email protected] Could not resolve dependency: react native paper
Javascript React
10 votes307 views1 answer
That is neither a react function component nor a custom react hook function. react component names must start with an uppercase letter. react hook names must start with the word "use"
Javascript React
0 vote352 views1 answer
How to create module in react
Javascript React
6 votes346 views1 answer
React-native italics
Javascript React
-2 votes287 views1 answer
React router previous location
Javascript React
0 vote375 views1 answer
Disable key enter react-hook-form
Javascript React
1 vote337 views1 answer
How to define state in react function
Javascript React
0 vote342 views1 answer
React Update a label when rate moves "quietly"
Javascript React
1 vote383 views1 answer
React usestate set is async
Javascript React