/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

78 votes124 views6 answers
React router redirect
Javascript React
0 vote129 views1 answer
Getting state in react-router-dom v6
Javascript React
31 votes138 views6 answers
React Sass
Javascript React
-1 vote118 views1 answer
How to create scroll to top button in reactjs example code
Javascript React
0 vote129 views1 answer
React native shadow maker
Javascript React
0 vote126 views1 answer
How to resolve cors in production react
Javascript React
1 vote134 views1 answer
Reactjs change window name
Javascript React
0 vote131 views2 answers
React social login button
Javascript React
9 votes156 views3 answers
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
5 votes133 views4 answers
React native status bar
Javascript React