useOutsideClick

useOutsideClick is a custom hook that handles a click outside a specified DOM element, like a div.

Import#

import { useOutsideClick } from "@chakra-ui/react"

Return value#

The useOutsideClick hook receives a reference to a DOM element and a handler when a clicks happens outside this given element.

Name	Type	Default	Description
`ref`	`object`		The ref to access the DOM.
`handler`	`function`		Callback function to handle the click.

This hooks is compatible with mouse and touch events.

Usage#

function Example() {
  const ref = React.useRef()
  const [isModalOpen, setIsModalOpen] = React.useState(false)
  useOutsideClick({
    ref: ref,
    handler: () => setIsModalOpen(false)
  })

  return (
    <>
      {isModalOpen ? (
        <div ref={ref}>
          👋 Hey, I'm a modal. Click anywhere outside of me to close.
        </div>
      ) : (
        <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      )}
    </>
  )
}

function Example() {
  const ref = React.useRef()
  const [isModalOpen, setIsModalOpen] = React.useState(false)
  useOutsideClick({
    ref: ref,
    handler: () => setIsModalOpen(false)
  })
  return (
    <>
      {isModalOpen ? (
        <div ref={ref}>
          👋 Hey, I'm a modal. Click anywhere outside of me to close.
        </div>
      ) : (
        <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      )}
    </>
  )
}

Editable Example

Edit this page