react-onclickoutside - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

bower.json

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

index.js

@@ -6,13 +6,10 @@ /**
  *
- * The idea is that components call:
+ * The idea is that components define function
  *
- *   this.onClickOutside(this.outsideHandler);
+ *   onClickOutside: function() { ... }
  *
- * in their .componentDidMount() function. The call returns an object with a
- * single function, .remove(), which can be called in the unmounting functions
- * to ensure the event listener is cleaned up properly.
+ * If no such function is defined, an error will be thrown, as this means
+ * either it still needs to be written, or the component should not be using
+ * this mixing since it will not exhibit onClickOutside behaviour.
  *
- * If no handler is passed in, an error will be thrown. There is no point
- * in having the code in place without pushing in an actual event handler.
- *
  */
@@ -35,6 +32,11 @@ (function (root, factory) {
 
+  // Use a parallel array because we can't use
+  // objects as keys, they get toString-coerced
+  var registeredComponents = [];
+  var handlers = [];
+
   return {
-    onClickOutside: function(handler) {
-      if(!handler)
-        throw new Error("Component tried to set up onClickOutside behaviour without an event handler.");
+    componentDidMount: function() {
+      if(!this.onClickOutside)
+        throw new Error("Component lacks an onClickOutside function to handle outside click events.");
 
@@ -57,14 +59,19 @@ var fn = (function(localNode, eventHandler) {
         }
-      }(this.getDOMNode(), handler));
+      }(this.getDOMNode(), this.onClickOutside));
 
       document.addEventListener("click", fn);
 
-      // successful registration returns an object that we can cache
-      // so that we can call .remove() on it during component unmount.
-      return {
-        remove: function() {
+      var pos = registeredComponents.length;
+      registeredComponents.push(this);
+      handlers[pos] = fn;
+    },
+
+    componentWillUnmount: function() {
+      var pos = registeredComponents.indexOf(this);
+      if( pos>-1) {
+        var fn = handlers[pos];
+        if (fn) {
           document.removeEventListener("click", fn);
         }
-      };
-
+      }
     }
@@ -71,0 +78,0 @@ };

package.json

 {
   "name": "react-onclickoutside",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "An onClickOutside mixin for React components",
@@ -23,6 +23,3 @@ "main": "index.js",
     "url": "https://github.com/Pomax/react-onclickoutside/issues"
-  },
-  "scripts": {
-    "test": "node test"
   }
 }

README.md

@@ -5,5 +5,11 @@ # An onClickOutside mixin for React components
 
-If you have Node.js needs, you can install this mixin via `npm`, using `npm install react-onclickoutside --save` (or `--save-dev` depending on your needs), and then use it in your components as:
+If you have Node.js needs, you can install this mixin via `npm`, using:
 
 ```
+npm install react-onclickoutside --save
+```
+
+(or `--save-dev` depending on your needs). You then then use it in your components as:
+
+```
 var Component = React.createClass({
@@ -14,11 +20,3 @@ mixins: [
 
-  componentDidMount: function() {
-    this._fn = this.onClickOutside(this.handleOutsideClick);
-  },
-
-  componentWillUnmount : function() {
-    this._fn.remove();
-  },
-
-  handleOutsideClick: function(evt) {
+  onClickOutside: function(evt) {
     // ...handling code goes here...
@@ -43,11 +41,3 @@ }
 
-  componentDidMount: function() {
-    this._fn = this.onClickOutside(this.handleOutsideClick);
-  },
-
-  componentWillUnmount : function() {
-    this._fn.remove();
-  },
-
-  handleOutsideClick: function(evt) {
+  onClickOutside: function(evt) {
     // ...handling code goes here...
@@ -54,0 +44,0 @@ }

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

Worsened metrics

Total package byte prevSize

4654

decreased by-10.93%

Number of package files

4

decreased by-20%

Lines of code

99

decreased by-5.71%

Number of lines in readme file

46

decreased by-17.86%

No dependency changes