/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

9 votes233 views5 answers
How to add array data on state react
Javascript React
0 vote211 views1 answer
React native textinput turnoff capitalize first letter
Javascript React
0 vote242 views1 answer
Get size of a View in React Native
Javascript React
28 votes214 views6 answers
React fontawesome
Javascript React
1 vote216 views1 answer
Npm react dropdown
Javascript React
0 vote217 views1 answer
Module not found: Can't resolve '@date-io/date-fns' in 'C:\Users\61455\Documents\React apps\mya2o\src\pages'
Javascript React
-2 votes219 views1 answer
How to hide keyboard in react native
Javascript React
0 vote218 views1 answer
Concatenate state with previous state in react redux
Javascript React
-1 vote223 views2 answers
React js props lara css uygulama
Javascript React
6 votes200 views1 answer
React native data map is not a function
Javascript React