OnClickOutside for use with ES6 classes

README.md

@@ -18,7 +18,7 @@ npm install react-onclickoutside --save
 
 (or `--save-dev` depending on your needs). You then use it in your components as:
 
-```
+```javascript
 var Component = React.createClass({
   mixins: [
     require('react-onclickoutside')
@@ -39,13 +39,13 @@ bower install react-onclickoutside
 
 and then include it as script via:
 
-```
+```html
 <script src="bower_components/react-onclickoutside/index.js"></script>
 ```
 
 Then use it as:
 
-```
+```javascript
 var Component = React.createClass({
   mixins: [
     OnClickOutside
@@ -66,7 +66,7 @@ When using this mixin, a component has two functions that can be used to explici
 
 In addition, you can create a component that uses this mixin such that it has the code set up and ready to go, but not listening for outside click events until you explicitly issue its `enableOnClickOutside()`, by passing in a properly called `disableOnClickOutside`:
 
-```
+```javascript
 var Component = React.createClass({
   mixins: [ ... ],
   handleClickOutside: function(evt) {
@@ -85,4 +85,41 @@ var Container = React.createClass({
 
 If you want the mixin to ignore certain elements, then add the class `ignore-react-onclickoutside` to that element and the callback won't be invoked when the click happens inside elements with that class.
 
+## ES6/2015 class support via HOC / ES7 decorators
+
+Since mixins can't be used with ES6/2015 class React components a 
+[Higher-Order Component (HOC)](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750) 
+and [ES7 decorator](https://github.com/wycats/javascript-decorators) are bundled with the mixin: 
+
+```javascript
+import listensToClickOutside from 'react-onclickoutside/decorator'; 
+
+class Component extends React.Component {
+  handleClickOutside = (event) => {
+    // ...
+  }
+}
+
+export default listensToClickOutside(Component);
+
+// OR
+
+import listensToClickOutside from 'react-onclickoutside/decorator'; 
+
+@listensToClickOutside()
+class Component extends React.Component {
+  handleClickOutside = (event) => {
+    // ...
+  }
+}
+
+export default Component;
+```
+
+One difference when using the HOC/decorator compared to the mixin is that the `enableOnClickOutside()`
+and `disableOnClickOutside()` methods are not available as class methods, but rather on the `props`;
+so instead of `this.enableOnClickOutside()` you would call `this.props.enableOnClickOutside()`.
+
+In every other respect the the mixin and HOC/decorator provides the same functionality. 
+
 For bugs and enhancements hit up https://github.com/Pomax/react-onclickoutside/issues

decorator.js

@@ -0,0 +1,97 @@
+var React = require('react');
+var objectAssign = require('react/lib/Object.assign');
+var OnClickOutsideMixin = require('react-onclickoutside');
+
+
+function addClickOutsideListener(Component) {
+
+  return React.createClass({
+
+    displayName: (Component.displayName || Component.name) + 'ClickOutside',
+
+    mixins: [OnClickOutsideMixin],
+
+    handleClickOutside: function(event) {
+      if (this.refs.inner.handleClickOutside) {
+        this.refs.inner.handleClickOutside(event);
+      }
+      else if (this.props.onClickOutside) {
+        this.props.onClickOutside(event);
+      }
+    },
+
+    render: function render() {
+      return React.createElement(Component, objectAssign({
+        enableOnClickOutside: this.enableOnClickOutside,
+        disableOnClickOutside: this.disableOnClickOutside,
+        ref: 'inner'
+      }, this.props));
+    }
+  });
+}
+
+
+/**
+ * @function listensToClickOutside
+ *
+ * A higher-order component for ES6 React classes to use the `handleClickOutside` event handler:
+ *
+ *   import listensToClickOutside from 'react-onclickoutside/decorator';
+ *
+ *   class Es6Component extends React.Component {
+ *     handleClickOutside = (event) => {
+ *       // ...handling code goes here...
+ *     }
+ *   }
+ *
+ *   export default listensToClickOutside(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}/>
+ *       );
+ *     }
+ *   }
+ *
+ * The [ES7 Decorator Pattern](https://github.com/wycats/javascript-decorators) is also supported
+ * using the same import:
+ *
+ *   import listensToClickOutside from 'react-onclickoutside/decorator';
+ *
+ *   @listensToClickOutside()
+ *   class Es6Component extends React.Component {
+ *     handleClickOutside = (event) => {
+ *       // ...handling code goes here...
+ *     }
+ *   }
+ *
+ * @param {React.Component} [Component] The component outside of which to listen to clicks.
+ * @returns {React.Component} or {Function} if using the decorator pattern.
+ */
+function listensToClickOutside(Component) {
+  // support decorator pattern
+  if (!Component) {
+    return function listensToClickOutsideDecorator(ComponentToDecorate) {
+      return addClickOutsideListener(ComponentToDecorate);
+    };
+  }
+
+  return addClickOutsideListener(Component);
+}
+
+module.exports = listensToClickOutside;