core.hooks.useClickOutside.ts Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of n2o-react

The newest version!

import { RefObject, useEffect } from 'react'

export default function useClickOutside(
    effect: (event: MouseEvent | TouchEvent) => void,
    refs: Array>,
) {
    useEffect(() => {
        const listener = (event: MouseEvent | TouchEvent) => {
            const res = refs.some(ref => !ref.current || ref.current.contains(event.target as Node))

            if (res) { return }

            effect(event)
        }

        document.addEventListener('mousedown', listener)
        document.addEventListener('touchstart', listener)

        return () => {
            document.removeEventListener('mousedown', listener)
            document.removeEventListener('touchstart', listener)
        }
    }, [...refs, effect])
}