listenToClickOutside higher-order component for use with ES6 classes.

Author: marnusw

OnClickOutside.js

@@ -0,0 +1,68 @@
+var React = require('react');
+var OnClickOutsideMixin = require('react-onclickoutside');
+
+
+/**
+ * @function listenToClickOutside
+ *
+ * A wrapper for ES6 React classes to use the `onClickOutside` event handler:
+ *
+ *     import listenToClickOutside from 'react-onclickoutside/listenToClickOutside.js';
+ *
+ *     class Es6Component extends React.Component {
+ *       handleClickOutside = (event) => {
+ *         // ...handling code goes here...
+ *       }
+ *     }
+ *
+ *     export default listenToClickOutside(Es6Component);
+ *
+ * Alternatively you can pass the handler down from the parent on an `onClickOutside` prop:
+ *
+ *     class Child extends React.Component {
+ *       // No event handler here, if provided this handler takes precedence and the one passed down
+ *       // is not called automatically. If it should be, call it on the props from the child handler.
+ *     }
+ *
+ *     Child = listenToClickOutside(Child);
+ *
+ *
+ *     class Parent extends React.Component {
+ *       handleClickOutside = (event) => {
+ *         // ...handling code goes here...
+ *       }
+ *
+ *       render() {
+ *         return (
+ *           <Child onClickOutside={this.handleClickOutside}/>
+ *         );
+ *       }
+ *     }
+ *
+ * @param {React.Component} Component The component outside of which to listen to clicks.
+ * @returns {React.Component}
+ */
+function listenToClickOutside(Component) {
+
+  return React.createClass({
+
+    displayName: (Component.displayName || Component.name) + 'ClickOutside',
+
+    mixins: [OnClickOutsideMixin],
+
+    handleClickOutside: function(event) {
+      if (this.refs.inner.handleClickOutside) {
+        return this.refs.inner.handleClickOutside(event);
+      }
+      if (this.props.onClickOutside) {
+        return this.props.onClickOutside(event);
+      }
+    },
+
+    render: function render() {
+      return React.createElement(Component, Object.assign({ref: 'inner'}, this.props));
+    }
+  });
+}
+
+module.exports = listenToClickOutside;