Ideas for new hooks! #326

imbhargav5 · 2020-12-13T22:24:45Z

imbhargav5
Dec 13, 2020
Maintainer

Hey All,

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

HARIKSREEE · 2024-03-15T13:55:46Z

HARIKSREEE
Mar 15, 2024

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();
        }
    });

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Ideas for new hooks! #326

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Ideas for new hooks! #326

Uh oh!

imbhargav5 Dec 13, 2020 Maintainer

Replies: 1 comment

Uh oh!

HARIKSREEE Mar 15, 2024

imbhargav5
Dec 13, 2020
Maintainer

HARIKSREEE
Mar 15, 2024