`useClickOutsideEvent()`

The useClickOutsideEvent() hook calls a listener when clicking outside one or more elements. It replaces the deprecated useClickOutside() hook: elements are read from refs (or any function returning elements) instead of element state, so the event listener is not re-subscribed on every render.

import {useClickOutsideEvent} from '@sanity/ui'
import {useRef} from 'react'

function App() {
  const buttonRef = useRef(null)

  useClickOutsideEvent(
    (event) => {
      // Called when clicking outside of the button
    },
    () => [buttonRef.current],
  )

  return <button ref={buttonRef}>...</button>
}

Signature

(
  listener: ((event: MouseEvent) => void) | false | undefined,
  elements?: () => (HTMLElement | null | (HTMLElement | null)[])[],
  boundaryElement?: () => HTMLElement | null
) => void

Loading…

Made withby folks at

`useClickOutsideEvent()`

import {useClickOutsideEvent} from '@sanity/ui'
import {useRef} from 'react'

function App() {
  const buttonRef = useRef(null)

  useClickOutsideEvent(
    (event) => {
      // Called when clicking outside of the button
    },
    () => [buttonRef.current],
  )

  return <button ref={buttonRef}>...</button>
}

Signature

(
  listener: ((event: MouseEvent) => void) | false | undefined,
  elements?: () => (HTMLElement | null | (HTMLElement | null)[])[],
  boundaryElement?: () => HTMLElement | null
) => void