1. Hooks
  2. useClickOutside

useClickOutside()

The useClickOutside() is React hook for handling click events outside of elements.

Basic example  

import {useClickOutside} from '@sanity/ui'

function MyButton () {
  const [buttonElement, setButtonElement] = useState(null)
  
  const handleClickOutside = useCallback(() => {
    console.log('outside')
  }, [])

  useClickOutside(handleClickOutside, [buttonElement])
  
  return <Button ref={setButtonElement} text="Label" />
}

Type  

(
  callback: () => void;
  elements: HTMLElement[];
  boundaryElement?: HTMLElement;
) => (el: HTMLElement | null) => void

Made withby folks at