Breaking News: Grepper is joining You.com. Read the official announcement!

NextJS, onClickOutside Hook

Doyin Atobaru answered on August 5, 2024 Popularity 1/10 Helpfulness 1/10

answer NextJS, onClickOutside Hook

NextJS, onClickOutside Hook

Comment

import { useEffect, useRef } from 'react';

/**
 * A custom hook that triggers a callback function when a click occurs outside of the referenced element.
 * @param callback - The function to be called when a click outside is detected.
 * @returns A ref to attach to the element you want to detect clicks outside of.
 */
export function useClickOutside(callback: () => void) {
    const ref = useRef<HTMLElement>(null);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (ref.current && !ref.current.contains(event.target as Node)) {
                callback();
            }
        };

        document.addEventListener('mousedown', handleClickOutside);

        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [callback]);

    return ref;
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: hook javascript

Link to this answer
Share Copy Link

Contributed on Aug 05 2024

Doyin Atobaru

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

NextJS, onClickOutside Hook

Contents

More Related Answers

NextJS, onClickOutside Hook

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.