react-resize-detector - npm Package Compare versions

Comparing version 5.2.0 to 6.0.0-alpha.0

lib/components/ResizeDetector.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -24,4 +26,2 @@ value: true
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -232,7 +232,6 @@
     _this.raf = null;
-    _this.unmounted = false;
     _this.targetRef = /*#__PURE__*/(0, _react.createRef)();
     _this.observableElement = null;
-    var handle = (0, _utils.getHandle)(refreshMode);
-    _this.resizeHandler = handle ? handle(_this.createResizeHandler, refreshRate, refreshOptions) : _this.createResizeHandler;
+    var refreshScheduler = (0, _utils.getRefreshScheduler)(refreshMode);
+    _this.resizeHandler = refreshScheduler ? refreshScheduler(_this.createResizeHandler, refreshRate, refreshOptions) : _this.createResizeHandler;
     _this.resizeObserver = new _resizeObserverPolyfill["default"](_this.resizeHandler);
@@ -258,3 +257,2 @@ return _this;
       this.cancelHandler();
-      this.unmounted = true;
     }
@@ -261,0 +259,0 @@ }, {

lib/esm/components/ResizeDetector.js

@@ -33,3 +33,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 import rafSchd from 'raf-schd';
-import { getHandle, isFunction, isSSR, isDOMElement } from "../lib/utils";
+import { getRefreshScheduler, isFunction, isSSR, isDOMElement } from "../lib/utils";
 
@@ -215,7 +215,6 @@ var ResizeDetector = /*#__PURE__*/function (_PureComponent) {
     _this.raf = null;
-    _this.unmounted = false;
     _this.targetRef = /*#__PURE__*/createRef();
     _this.observableElement = null;
-    var handle = getHandle(refreshMode);
-    _this.resizeHandler = handle ? handle(_this.createResizeHandler, refreshRate, refreshOptions) : _this.createResizeHandler;
+    var refreshScheduler = getRefreshScheduler(refreshMode);
+    _this.resizeHandler = refreshScheduler ? refreshScheduler(_this.createResizeHandler, refreshRate, refreshOptions) : _this.createResizeHandler;
     _this.resizeObserver = new ResizeObserver(_this.resizeHandler);
@@ -241,3 +240,2 @@ return _this;
       this.cancelHandler();
-      this.unmounted = true;
     }
@@ -244,0 +242,0 @@ }, {

lib/esm/index.js

 import ResizeDetector from "./components/ResizeDetector";
-import withResizeDetector from "./hoc/withResizeDetector";
-export { withResizeDetector };
+import withResizeDetector from "./withResizeDetector";
+import useResizeDetector from "./useResizeDetector";
+export { withResizeDetector, useResizeDetector };
 export default ResizeDetector;

lib/esm/lib/utils.js

 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
-export var listHandle = {
+export var refreshSchedulers = {
   debounce: debounce,
   throttle: throttle
 };
-export var getHandle = function getHandle(type) {
-  return listHandle[type];
+export var getRefreshScheduler = function getRefreshScheduler(type) {
+  return refreshSchedulers[type];
 };
@@ -10,0 +10,0 @@ export var isFunction = function isFunction(fn) {

lib/index.js

@@ -12,2 +12,8 @@ "use strict";
 });
+Object.defineProperty(exports, "useResizeDetector", {
+  enumerable: true,
+  get: function get() {
+    return _useResizeDetector["default"];
+  }
+});
 exports["default"] = void 0;
@@ -17,4 +23,6 @@
 
-var _withResizeDetector = _interopRequireDefault(require("./hoc/withResizeDetector"));
+var _withResizeDetector = _interopRequireDefault(require("./withResizeDetector"));
 
+var _useResizeDetector = _interopRequireDefault(require("./useResizeDetector"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -21,0 +29,0 @@

lib/lib/utils.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.isDOMElement = exports.isSSR = exports.isFunction = exports.getHandle = exports.listHandle = void 0;
+exports.isDOMElement = exports.isSSR = exports.isFunction = exports.getRefreshScheduler = exports.refreshSchedulers = void 0;
 
@@ -15,13 +15,13 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
-var listHandle = {
+var refreshSchedulers = {
   debounce: _debounce["default"],
   throttle: _throttle["default"]
 };
-exports.listHandle = listHandle;
+exports.refreshSchedulers = refreshSchedulers;
 
-var getHandle = function getHandle(type) {
-  return listHandle[type];
+var getRefreshScheduler = function getRefreshScheduler(type) {
+  return refreshSchedulers[type];
 };
 
-exports.getHandle = getHandle;
+exports.getRefreshScheduler = getRefreshScheduler;
 
@@ -28,0 +28,0 @@ var isFunction = function isFunction(fn) {

package.json

@@ -9,3 +9,3 @@ {
   "scripts": {
-    "build": "npm run build:cjs && npm run build:esm",
+    "build": "npm link react react-dom && npm run build:cjs && npm run build:esm",
     "build:cjs": "babel src --out-dir lib",
@@ -24,27 +24,25 @@ "build:esm": "cross-env BABEL_ENV=esm babel src --out-dir lib/esm",
   "devDependencies": {
-    "@babel/cli": "^7.11.5",
-    "@babel/core": "^7.11.5",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
     "babel-eslint": "^10.0.3",
-    "babel-plugin-module-resolver": "^4.0.0",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "cross-env": "^7.0.2",
-    "eslint": "^7.8.1",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.6",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.17.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "author": "Vitalii Maslianok <[e-mail]> (https://github.com/maslianok)",
-  "version": "5.2.0",
+  "version": "6.0.0-alpha.0",
   "bugs": {
@@ -51,0 +49,0 @@ "url": "https://github.com/maslianok/react-resize-detector/issues"

README.md

@@ -21,7 +21,20 @@ # Handle element resizes like it's 2020!
 
-Starting from v5.0.0 there are 2 recommended ways to work with `resize-detector` library:
+Starting from v6.0.0 there are 3 recommended ways to work with `resize-detector` library:
 
-#### 1. HOC pattern
+#### 1. React hook (new in v6.0.0)
 
 ```jsx
+import { useResizeDetector } from 'react-resize-detector';
+
+const CustomComponent = () => {
+  const { width, height, ref } = useResizeDetector();
+  return <div ref={ref}>{`${width}x${height}`}</div>;
+};
+```
+
+you can pass props as an object to useResizeDetector. For example, `useResizeDetector({ refreshMode: 'debounce', refreshRate: 1000 })`
+
+#### 2. HOC pattern
+
+```jsx
 import { withResizeDetector } from 'react-resize-detector';
@@ -34,3 +47,3 @@
 
-#### 2. Child Function Pattern
+#### 3. Child Function Pattern
 
@@ -37,0 +50,0 @@ ```jsx

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Dev dependency count

16

decreased by-11.11%

Lines of code

915

increased by4.93%

Number of lines in readme file

204

increased by6.81%

Worsened metrics

Total package byte prevSize

64951

decreased by-1.47%

Number of package files

14

decreased by-12.5%

Number of low quality alerts

1

increased byInfinity%

No dependency changes