react-onclickoutside - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

package.json

 {
   "name": "react-onclickoutside",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "An onClickOutside mixin for React components",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -21,3 +21,3 @@ # An onClickOutside mixin for React components
 
-```
+```javascript
 var Component = React.createClass({
@@ -43,3 +43,3 @@ mixins: [
 
-```
+```html
 <script src="bower_components/react-onclickoutside/index.js"></script>
@@ -50,3 +50,3 @@ ```
 
-```
+```javascript
 var Component = React.createClass({
@@ -72,3 +72,3 @@ mixins: [
 
-```
+```javascript
 var Component = React.createClass({
@@ -92,2 +92,45 @@ mixins: [ ... ],
 
+## 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
+
+## Version compatibility
+
+If you still use React 0.13 or 0.12, any version up to and including 3.* will work. Any version v4.* or above will not work due to relying on modules not introduced until React 0.14.
+
+If you use React 0.14 or above, use v4.*, as that specifically uses `react-DOM` for the necessary DOM event bindings.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12920

increased by51.5%

Number of package files

5

increased by25%

Lines of code

227

increased by60.99%

Number of lines in readme file

132

increased by48.31%

No dependency changes