useOnOutsideClick
A utility Hook that calls a user-provided callback function when the user clicks outside of the provided container.
useOnOutsideClick
is a utility Hook that calls a user-provided callback function when the user clicks outside of the provided container.
You can also pass an array of ignoredRefs
to prevent calling the callback function on additional elements on the page. This can be handy for ignoring clicks on trigger buttons that already manage the open/closed state of content.
Name | Type | Default | Description |
---|---|---|---|
onOutsideClick | function | Function to call when user clicks outside of the container. Usually this manages the state of the visibility of the container. | |
ignoredRefs | React.RefObject<HTMLElement> [] | Elements outside of the container to ignore clicks on. | |
containerRef | React.RefObject<HTMLElement> | Required. A ref for the containing element. |