Package Exports
- react-click-outside
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-click-outside) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Click Outside 
Enhance a React component with a Higher Order Component that provides click outside detection.
Usage
Installation:
npm install react-click-outside
Some component that you wish to enhance with click outside detection:
const enhanceWithClickOutside = require('react-click-outside');
const React = require('react');
const Dropdown = React.createClass({
getInitialState() {
return {
isOpened: false,
};
},
handleClickOutside() {
this.setState({ isOpened: false });
},
render() {
...
},
});
module.exports = enhanceWithClickOutside(Dropdown);
Details
The enhanceWithClickOutside
function wraps the provided component in another
component that registers a click handler on document
for the event capturing
phase. Using the event capturing phase prevents elements with a click handler
that calls stopPropagation
from cancelling the click event that would
eventually trigger the component's handleClickOutside
function.
Why not a mixin?
There are some mixins that provide click outside detection functionality, but
they prevent the component from implementing the componentDidMount
and
componentWillUnmount
life cycle hooks. I recommend not using a mixin for this
case.
Limitations
- IE9+ due to
addEventListener
and usage of the event capturing phase.