@langleyfoxall/react-click-outside NPM

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.

Props

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.

Example:

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

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.

react outside close click

@everything-registry/sub-chunk-535 @ninetynine/react-dropdown @langleyfoxall/react-dynamic-context-menu

1.0.0

5 years ago