/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

0 vote144 views1 answer
Exemple de modal reactjs
Javascript React
1 vote171 views1 answer
Module not found: Can't resolve 'C:\Users\{user}\Documents\React apps\{app-name}\node_modules\react-scripts\node_modules\babel-loader\lib\index.js'
Javascript React
7 votes148 views3 answers
Conditional style react
Javascript React
3 votes139 views3 answers
Chart js react
Javascript React
0 vote142 views1 answer
Npm ERR! peer react@"^15.x.x" from [email protected]
Javascript React
0 vote165 views1 answer
React 1 to 10 with step 2 (odd numbers)
Javascript React
0 vote144 views1 answer
React import useCallBack
Javascript React
0 vote170 views1 answer
Debug.xcconfig: unable to open file react native
Javascript React
0 vote137 views1 answer
Disable key enter react-hook-form
Javascript React
0 vote147 views1 answer
React native gridient button
Javascript React