🖱️A simple React Component for handling clicking outside of elements
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


React Click Outside

React Click Outside is a simple component that can be wrapped around JSX to provide a callback when the mouse is clicked outside of it. It is also possible to exclude elements from triggering the callback when clicked.


Name Type Usage
onClickOutside Function The function called when the mouse is clicked outside of the wrapped element. Ignoring ignoredRefs.
domRef (Optional) ref If specified, this ref will be used instead of creating a new one and applied to the element
ignoreRefs (Optional) Single or Array ref Refs of elements that if clicked on won't fire the onClickOutside callback.

Basic usage

Simply wrap the JSX with the ClickOutside and provide a function for the onClickOutside prop.


<ClickOutside onClickOutside={this.handleClickOutside}>
	<img src="cute-dog.png"/>

Advanced usage

Custom Ref

If you want to provide your own ref, for example you already have a ref for the element you want to click outside. You can use the domRef prop. This ref will be applied to the child instead of creating a new one.

Ignoring Clicks on Certain Elements

If you don't want the callback to be fired when certain elements were clicked on you can pass an array of refs or a single ref into the ignoreRefs prop.