Simple React hook to detect when a click happens outside a component. Useful for implementing modal dialogs and popups.
yarn add @sweepbright/use-click-outsidenpm install @sweepbright/use-click-outside
import {useClickOutside} from '@sweepbright/use-click-outside'
function Popup() {
const ref= React.useRef(null)
const onClickOutside = React.useCallback(() => {
alert('clicked outside element')
})
useClickOutside(ref, {
onClickOutside
})
return <div ref={ref}> Hello </div>
}useClickOutside(ref, config, deps)| Param | Type | Description |
|---|---|---|
ref |
RefObject | A mutable ref object whose current property points target element DOM node |
| Param | Type | Description |
|---|---|---|
config |
Object | A configuration object for the behavior of the hook |
The following options are supported
onClickOutside: (evt: MouseEvent) => void- Required
- Must be memoized
- Will be called every time a click outside the target element is detected
- It is passed the click event object
skip: boolean- Optional
- Defaults to
false - Useful when you want to skip the listener. It can be used as a perf improvement when you know the element target element is not in the DOM.
| Param | Type | Description |
|---|---|---|
deps |
Array | Optional dependency array |
TODO
MIT