useOutsideClick
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
import { useOutsideClick } from '@chakra-ui/react'
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>
)}
</>
)
}
Parameters
The useOutsideClick
hook accepts an object with the following properties:
ref
required
ref
required
Description
The reference to a DOM element.
Type
RefObject<HTMLElement>
enabled
enabled
Description
Whether the hook is enabled
Type
boolean
handler
handler
Description
Function invoked when a click is triggered outside the referenced element.
Type
((e: Event) => void)