A bare bones onClickOutside ES6 Class component for React
This is an ES6 Class component you can use with your own React components if you want to have them listen for clicks that occur somewhere in the document, outside of the element itself (for instance, if you need to hide a menu when people click anywhere else on your page).
Installation
Use npm
:
$> npm install react-onclickoutside-es6 --save
(or --save-dev
depending on your needs). You then use it in your components as:
// load the HOC:
import OnClickOutside from 'react-onclickoutside-es6'
// or to use the PureComponent version of OnClickOutside:
// import OnClickOutside from 'react-onclickoutside-es6/pure'
// create a new component, extending OnClickOutside:
class MyComponent extends OnClickOutside {
...
}));
// add the onClickOutside prop to your component:
<MyComponent
onClickOutside={event => {
// ...handling code goes here...
}}
/>
Regulate which events to listen for
By default, "outside clicks" are based on both mousedown
and touchstart
events; if that is what you need, then you do not need to specify anything special. However, if you need different events, you can specify these using the outsideEventTypes
property. If you just need one event, you can pass in the event name as plain string:
<MyComponent outsideEventTypes="click" ... />
For multiple events, you can pass in the array of event names you need to listen for:
<MyComponent outsideEventTypes={["click", "touchend"]} ... />
Common issues
Uncaught SyntaxError: Unexpected token import
If you get this error, you probably need to make sure whatever ES6 compiler you are using (Babel, etc.) is including the react-onclickoutside-es6 component.
For example, if you are using webpack, you need to add the module to your js loader includes. Something like:
{
test: /\.(js|jsx)$/,
loader: 'babel',
include: [
path.join(__dirname, './node_modules', 'react-onclickoutside-es6'),
...
]
}
React versions?
This has only been tested on React 15.0.0 and higher.
Thanks
Thanks to Pomax for the original onclickoutside component!