use-resize-observer - npm Package Compare versions

Comparing version 6.0.0 to 6.1.0-alpha.1

CHANGELOG.md

 # CHANGELOG
 
+## 6.1.0-alpha1
+
+- Rewrote the source in TypeScript. (Feedback is welcome.)
+- Rewrote tests in TypeScript as well. (Ensures the types make sense.)
+- Added checks to ensure reasonable bundle size.
+
 ## 6.0.0
@@ -4,0 +10,0 @@

dist/bundle.cjs.js

@@ -5,25 +5,7 @@ 'use strict';
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+function useResizeObserver(opts) {
+  if (opts === void 0) {
+    opts = {};
+  }
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function index (_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      ref = _ref.ref,
-      onResize = _ref.onResize;
-
   // `defaultRef` Has to be non-conditionally declared here whether or not it'll
@@ -33,3 +15,4 @@ // be used as that's how hooks work.
   var defaultRef = react.useRef(null);
-  ref = ref || defaultRef;
+  var ref = opts.ref || defaultRef;
+  var onResize = opts.onResize;
 
@@ -91,8 +74,10 @@ var _useState = react.useState({
   return react.useMemo(function () {
-    return _extends({
-      ref: ref
-    }, size);
+    return {
+      ref: ref,
+      width: size.width,
+      height: size.height
+    };
   }, [ref, size ? size.width : null, size ? size.height : null]);
 }
 
-module.exports = index;
+module.exports = useResizeObserver;

dist/bundle.esm.js

 import { useRef, useState, useEffect, useMemo } from 'react';
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+function useResizeObserver(opts) {
+  if (opts === void 0) {
+    opts = {};
+  }
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function index (_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      ref = _ref.ref,
-      onResize = _ref.onResize;
-
   // `defaultRef` Has to be non-conditionally declared here whether or not it'll
@@ -30,3 +12,4 @@ // be used as that's how hooks work.
   var defaultRef = useRef(null);
-  ref = ref || defaultRef;
+  var ref = opts.ref || defaultRef;
+  var onResize = opts.onResize;
 
@@ -88,8 +71,10 @@ var _useState = useState({
   return useMemo(function () {
-    return _extends({
-      ref: ref
-    }, size);
+    return {
+      ref: ref,
+      width: size.width,
+      height: size.height
+    };
   }, [ref, size ? size.width : null, size ? size.height : null]);
 }
 
-export default index;
+export default useResizeObserver;

package.json

 {
   "name": "use-resize-observer",
-  "version": "6.0.0",
+  "version": "6.1.0-alpha.1",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
   "repository": "[e-mail]:ZeeCoder/use-resize-observer.git",
   "description": "A React hook that allows you to use a ResizeObserver to measure an element's size.",
-  "author": "Viktor Hubert <[e-mail]>",
+  "author": "Viktor Hubert <[e-mail]>",
   "license": "MIT",
@@ -14,7 +15,9 @@ "scripts": {
     "watch": "KARMA_BROWSERS=Chrome run-p src:watch test:watch karma:watch",
-    "src:build": "rollup -c",
+    "src:build": "rollup -c && tsc && cp dist/index.d.ts polyfilled.d.ts",
     "src:watch": "rollup -c -w",
-    "test": "run-s build karma:run",
-    "test:build": "parcel build tests/index.js --out-dir tests/dist",
-    "test:watch": "parcel watch tests/index.js --out-dir tests/dist",
+    "tsc": "tsc",
+    "size-limit": "size-limit",
+    "test": "run-s 'build' 'size-limit' 'tsc -p tests' 'test:chrome:headless' 'test:firefox:headless'",
+    "test:build": "parcel build tests/index.tsx --out-dir tests/dist",
+    "test:watch": "parcel watch tests/index.ts --out-dir tests/dist",
     "test:chrome": "KARMA_BROWSERS=Chrome yarn karma:run",
@@ -34,5 +37,4 @@ "test:chrome:headless": "KARMA_BROWSERS=ChromeHeadless yarn karma:run",
   "lint-staged": {
-    "*.{js,md}": [
-      "prettier --write",
-      "git add"
+    "*.{js,ts,md}": [
+      "prettier --write"
     ]
@@ -47,19 +49,27 @@ },
     "@babel/preset-env": "^7.7.7",
+    "@babel/preset-typescript": "^7.9.0",
+    "@rollup/plugin-inject": "^4.0.1",
+    "@size-limit/preset-small-lib": "^4.4.5",
+    "@types/karma": "^5.0.0",
+    "@types/karma-jasmine": "^3.1.0",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.6",
     "babel-regenerator-runtime": "^6.5.0",
     "delay": "^4.1.0",
-    "husky": "^3.0.4",
-    "karma": "^4.2.0",
+    "husky": "^4.2.5",
+    "karma": "^5.0.1",
     "karma-chrome-launcher": "^3.0.0",
-    "karma-firefox-launcher": "^1.2.0",
-    "karma-jasmine": "^2.0.1",
+    "karma-firefox-launcher": "^1.3.0",
+    "karma-jasmine": "^3.1.1",
     "karma-spec-reporter": "^0.0.32",
-    "lint-staged": "^9.5.0",
+    "lint-staged": "^10.1.3",
     "npm-run-all": "^4.1.5",
     "parcel-bundler": "^1.10.3",
-    "prettier": "^1.14.3",
+    "prettier": "^2.0.4",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "rollup": "^1.27.14",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-inject": "^3.0.2"
+    "rollup": "^2.6.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "size-limit": "^4.4.5",
+    "typescript": "^3.8.3"
   },
@@ -66,0 +76,0 @@ "dependencies": {

polyfilled.js

@@ -8,25 +8,7 @@ 'use strict';
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+function useResizeObserver(opts) {
+  if (opts === void 0) {
+    opts = {};
+  }
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function index (_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      ref = _ref.ref,
-      onResize = _ref.onResize;
-
   // `defaultRef` Has to be non-conditionally declared here whether or not it'll
@@ -36,3 +18,4 @@ // be used as that's how hooks work.
   var defaultRef = react.useRef(null);
-  ref = ref || defaultRef;
+  var ref = opts.ref || defaultRef;
+  var onResize = opts.onResize;
 
@@ -94,8 +77,10 @@ var _useState = react.useState({
   return react.useMemo(function () {
-    return _extends({
-      ref: ref
-    }, size);
+    return {
+      ref: ref,
+      width: size.width,
+      height: size.height
+    };
   }, [ref, size ? size.width : null, size ? size.height : null]);
 }
 
-module.exports = index;
+module.exports = useResizeObserver;

README.md

@@ -8,2 +8,13 @@ # use-resize-observer
 
+## Highlights
+
+- Written in **TypeScript**.
+- **Tiny**: 323 B (minified, gzipped) Monitored by [size-limit](https://github.com/ai/size-limit).
+- Exposes an **onResize callback** if you need more control.
+- [Throttle / Debounce](#throttle--debounce)
+- Works with **SSR**.
+- Works with **CSS-in-JS**.
+- **Supports custom refs** in case you [had one already](#passing-in-your-own-ref).
+- **Tested** in real browsers. (Headless Chrome and Firefox).
+
 ## In Action
@@ -55,2 +66,33 @@
 
+## The "onResize" callback
+
+By the default the hook will trigger a re-render on all changes to the target
+element's width and / or height.
+
+You can opt out of this behaviour, by providing an `onResize` callback function,
+which'll simply receive the width and height of the element when it changes, so
+that you can decide what to do with it:
+
+```js
+import React from "react";
+import useResizeObserver from "use-resize-observer";
+
+const App = () => {
+  // width / height will not be returned here when the onResize callback is present
+  const { ref } = useResizeObserver({
+    onResize: ({ width, height }) => {
+      // do something here.
+    },
+  });
+
+  return <div ref={ref} />;
+};
+```
+
+This callback also makes it possible to implement your own hooks that report only
+what you need, for example:
+
+- Reporting only width or height
+- Throttle / debounce
+
 ## Throttle / Debounce
@@ -57,0 +99,0 @@

New alerts

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

Improved metrics

Total package byte prevSize

19209

increased by15.04%

Number of package files

10

increased by42.86%

Lines of code

267

increased by15.09%

Number of lines in readme file

164

increased by34.43%

Worsened metrics

Dev dependency count

27

increased by42.11%

Number of low quality alerts

2

increased by100%

No dependency changes