useOnClickOutside


React hook for listening for clicks outside of a specified element (see useRef).

This can be useful for closing a modal, a dropdown menu etc.

Usage

import { useRef } from 'react'

import { useOnClickOutside } from 'reactchemy'

export default function Component() {
   const ref = useRef(null)

   const handleClickOutside = () => {
      // Your custom logic here
      console.log('clicked outside')
   }

   const handleClickInside = () => {
      // Your custom logic here
      console.log('clicked inside')
   }

   useOnClickOutside(ref, handleClickOutside)

   return (
    <button
      ref={ref}
      onClick={handleClickInside}
      style={{ width: 200, height: 200, background: 'cyan' }}
    />
   )
}

Hook

import type { RefObject } from 'react'

import { useEventListener } from 'reactchemy'

type Handler = (event: MouseEvent) => void

export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
   ref: RefObject<T>,
   handler: Handler,
   mouseEvent: 'mousedown' | 'mouseup' = 'mousedown',
): void {
   useEventListener(mouseEvent, (event) => {
      const el = ref?.current

      // Do nothing if clicking ref's element or descendent elements
      if (!el || el.contains(event.target as Node))
         return

      handler(event)
   })
}