react-responsive-mixin - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

index.js

@@ -5,4 +5,4 @@ var enquire = require('enquire.js');
 var ResponsiveMixin = {
-  media: function (mediaQuery, handler) {
-    mediaQuery = json2mq(mediaQuery);
+  media: function (query, handler) {
+    query = json2mq(query);
     if (typeof handler === 'function') {
@@ -13,3 +13,14 @@ handler = {
     }
-    enquire.register(mediaQuery, handler);
+    enquire.register(query, handler);
+
+    // Queue the handlers to unregister them at unmount  
+    if (! this._responsiveMediaHandlers) {
+      this._responsiveMediaHandlers = [];
+    }
+    this._responsiveMediaHandlers.push({query: query, handler: handler});
+  },
+  componentWillUnmount: function () {
+    this._responsiveMediaHandlers.forEach(function(obj) {
+      enquire.unregister(obj.query, obj.handler);
+    })
   }
@@ -16,0 +27,0 @@ };

package.json

 {
   "name": "react-responsive-mixin",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Mixin to develop responsive react components",
@@ -26,4 +26,13 @@ "main": "index.js",
     "enquire.js": "^2.1.1",
-    "json2mq": "^0.1.0"
+    "json2mq": "^0.2.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^5.0.0",
+    "gulp": "^3.8.10",
+    "gulp-ruby-sass": "^0.7.1",
+    "jsx-loader": "^0.12.2",
+    "react": "^0.12.2",
+    "webpack": "^1.4.15",
+    "webpack-dev-server": "^1.7.0"
   }
 }

README.md

 # react-responsive-mixin
 
-react-responsive-mixin makes building responsive components easy
-This mixin adds method to the react component called media()
+> react-responsive-mixin makes building responsive components easy
 
+This mixin adds method called `media()` to the react component.
+This is a wrapper around [enquire.js](http://wicky.nillia.ms/enquire.js/)
+
 ### Usage
@@ -11,6 +13,8 @@ ```javascript
 ##### `query`
-query can be either a string or object
+query is a media query definition either in string or object format.
+this mixin internally uses [json2mq](https://github.com/akiran/json2mq) to convert media query from object to string format.
 
 ##### `handler`
-handler can be either a function or object
+handler is a function that needs to be executed when media query matches. 
+handler can also be an object according to [enquire.js](http://wicky.nillia.ms/enquire.js/#api) API
 
@@ -17,0 +21,0 @@ ##### Example

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

7187

increased by95.03%

Number of package files

9

increased by80%

Lines of code

98

increased by653.85%

Number of lines in readme file

51

increased by8.51%

Worsened metrics

Dev dependency count

7

increased byInfinity%

Dependency changes

• + Addedjson2mq@0.2.0(transitive)

• - Removedjson2mq@0.1.0(transitive)

• Updatedjson2mq@^0.2.0