Ideas for new hooks!

[imbhargav5]

Hey All,

If you have more ideas for hooks, let's talk here!

[HARIKSREEE]

Hi I would like to add a new hook for detecting attention within a html element.
Eg: I have a div element. Within that there are couple of components. If there is any need to detect the presence within the div I mentioned earlier and also if the presence is leaving from that div, I am thinking of adding a new hook.

import { useState, useEffect, useRef, useCallback } from 'react';

type AttentionHandlerMap = {
    onLoosingAttention?: () => void;
    onGainingAttention?: () => void;
};

const useAttention = <TElement extends HTMLElement>(handlers: AttentionHandlerMap) => {
    const [_, setHasClickedInside] = useState(false);

    const ref = useRef<TElement>(null);

    const handleClickOutside = useCallback(
        (event: MouseEvent) => {
            setHasClickedInside((hasClickedInside) => {
                const wasClickedInside = !!ref.current && ref.current.contains(event.target as Node);
                if (wasClickedInside !== hasClickedInside) {
                    wasClickedInside ? handlers.onGainingAttention?.() : handlers.onLoosingAttention?.();
                    return wasClickedInside;
                }
                return hasClickedInside;
            });
        },
        [handlers]
    );

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

    return ref;
};

export default useAttention;

usage:

    const ref = useAttention<HTMLDivElement>({
        onLoosingAttention: () => {
            handleOutsideClick();
        }
    });