/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

2 votes220 views3 answers
Select the items from selectors in .map reactjs
Javascript React
4 votes188 views2 answers
React input number
Javascript React
0 vote201 views1 answer
React native button top right
Javascript React
2 votes249 views4 answers
Can't perform a React state update on an unmounted component
Javascript React
4 votes202 views2 answers
Google map react search place
Javascript React
0 vote254 views1 answer
Get LocalStorage from WebView react native
Javascript React
16 votes221 views6 answers
React useState hook
Javascript React
2 votes244 views2 answers
React aws s3 npm
Javascript React
0 vote198 views1 answer
Render a react component only after API response is received
Javascript React
0 vote194 views1 answer
React native showing double header stack and drawer menu
Javascript React