useOutsideClick is a custom hook that handles click events outside a specific DOM element, like a div. A handler is invoked when a click or touch event happens outside the referenced element.

This hook is compatible with mouse and touch events.


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


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


The useOutsideClick hook accepts an object with the following properties:

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel