@entria/responsiveness - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

lib/responsive/Responsive.js

@@ -32,17 +32,23 @@ 'use strict';
 
-  function Responsive() {
-    var _ref;
+  function Responsive(props) {
+    _classCallCheck(this, Responsive);
 
-    var _temp, _this, _ret;
+    var _this = _possibleConstructorReturn(this, (Responsive.__proto__ || Object.getPrototypeOf(Responsive)).call(this, props));
 
-    _classCallCheck(this, Responsive);
+    _this.state = {
+      viewport: (0, _utils.getViewport)(window.innerWidth)
+    };
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    _this.handleResize = function () {
+      clearTimeout(_this.timeout);
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Responsive.__proto__ || Object.getPrototypeOf(Responsive)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      timeout: null,
-      viewport: (0, _utils.getViewport)(window.innerWidth)
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+      _this.timeout = setTimeout(function () {
+        _this.setState({
+          viewport: (0, _utils.getViewport)(window.innerWidth)
+        });
+      }, 100);
+    };
+
+    _this.timeout = null;
+    return _this;
   }
@@ -53,7 +59,3 @@
     value: function componentDidMount() {
-      var _this2 = this;
-
-      window.addEventListener('resize', function () {
-        return _this2.handleResize();
-      });
+      window.addEventListener('resize', this.handleResize);
     }
@@ -63,24 +65,7 @@ }, {
     value: function componentWillUnmount() {
-      var _this3 = this;
+      clearTimeout(this.timeout);
 
-      window.removeEventListener('resize', function () {
-        return _this3.handleResize();
-      });
+      window.removeEventListener('resize', this.handleResize);
     }
   }, {
-    key: 'handleResize',
-    value: function handleResize() {
-      var _this4 = this;
-
-      clearTimeout(this.state.timeout);
-
-      this.setState({
-        timeout: setTimeout(function () {
-          _this4.setState({
-            viewport: (0, _utils.getViewport)(window.innerWidth)
-          });
-        }, 100)
-      });
-    }
-  }, {
     key: 'render',
@@ -87,0 +72,0 @@ value: function render() {

package.json

 {
   "name": "@entria/responsiveness",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Responsive style tools for ReactJS",
@@ -55,2 +55,3 @@ "keywords": [
   "scripts": {
+    "prepublish": "npm run build",
     "build": "babel src -d lib",
@@ -64,7 +65,6 @@ "lint": "eslint --ext js src",
     "check": "npm run lint && npm run test",
-    "prerelease": "npm run check && npm run build && git add lib && git commit -m 'Update ./lib/'",
-    "release:patch": "npm run prerelease && npm version patch && git push --follow-tags && npm publish --access public",
-    "release:minor": "npm run prerelease && npm version minor && git push --follow-tags && npm publish --access public",
-    "release:major": "npm run prerelease && npm version major && git push --follow-tags && npm publish --access public"
+    "release:patch": "npm run check && npm version patch && git push --follow-tags && npm publish --access public",
+    "release:minor": "npm run check && npm version minor && git push --follow-tags && npm publish --access public",
+    "release:major": "npm run check && npm version major && git push --follow-tags && npm publish --access public"
   }
 }

README.md

@@ -11,7 +11,7 @@ # Responsiveness
 ```bash
-npm i responsiveness --save
-yarn add responsiveness
+npm i @entria/responsiveness --save
+yarn add @entria/responsiveness
 ```
 
-# Usage 
+# Usage
 
@@ -40,3 +40,3 @@ You can define the sizes with their specifics props (`small`, `medium`, `large`).
 import React from 'react';
-import { Grid } from 'responsiveness';
+import { Grid } from '@entria/responsiveness';
 
@@ -43,0 +43,0 @@ const Example = () => (

src/responsive/Responsive.js

@@ -25,4 +25,8 @@ import React, { Component } from 'react';
 
+  constructor(props) {
+    super(props);
+    this.timeout = null;
+  }
+
   state = {
-    timeout: null,
     viewport: getViewport(window.innerWidth),
@@ -32,20 +36,20 @@ };
   componentDidMount() {
-    window.addEventListener('resize', () => this.handleResize());
+    window.addEventListener('resize', this.handleResize);
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', () => this.handleResize());
+    clearTimeout(this.timeout);
+
+    window.removeEventListener('resize', this.handleResize);
   }
 
-  handleResize() {
-    clearTimeout(this.state.timeout);
+  handleResize = () => {
+    clearTimeout(this.timeout);
 
-    this.setState({
-      timeout: setTimeout(() => {
-        this.setState({
-          viewport: getViewport(window.innerWidth),
-        });
-      }, 100),
-    });
-  }
+    this.timeout = setTimeout(() => {
+      this.setState({
+        viewport: getViewport(window.innerWidth),
+      });
+    }, 100);
+  };
 
@@ -52,0 +56,0 @@ render() {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

215720

decreased by-0.56%

Number of package files

26

decreased by-3.7%

Lines of code

454

decreased by-6.39%

No dependency changes