/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

5 votes212 views2 answers
React js download file
Javascript React
2 votes230 views2 answers
Update specific properties of an object react spread operator
Javascript React
2 votes168 views6 answers
React font-awesome
Javascript React
3 votes217 views1 answer
React router dynamic routes
Javascript React
4 votes221 views1 answer
React native radio buttons
Javascript React
0 vote233 views1 answer
Custom react native product rating
Javascript React
0 vote222 views1 answer
How to add carsoul to react project
Javascript React
1 vote222 views1 answer
Fontawsome icon size react element
Javascript React
1 vote223 views1 answer
Spread operator react array
Javascript React
9 votes274 views1 answer
How to create a react app in current folder
Javascript React