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>
}(
listener: ((event: MouseEvent) => void) | false | undefined,
elements?: () => (HTMLElement | null | (HTMLElement | null)[])[],
boundaryElement?: () => HTMLElement | null
) => void