/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 vote240 views1 answer
React native getting older version assets
Javascript React
2 votes258 views3 answers
React scroll on top while transition
Javascript React
0 vote213 views1 answer
Import Bootstrap to React Redux CRUD App
Javascript React
0 vote218 views1 answer
How is react different from normal js
Javascript React
0 vote305 views1 answer
Coreui react change background color
Javascript React
1 vote225 views1 answer
Remove underline from hyperlink react
Javascript React
0 vote265 views1 answer
Avoid compressing imagepicker react native
Javascript React
1 vote226 views2 answers
[HomePage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Javascript React
0 vote230 views1 answer
React native add bottom tab and drawer menu
Javascript React
0 vote218 views1 answer
In whatsapp share text add a new line react
Javascript React