react-use-measure - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

.size-snapshot.json

@@ -20,3 +20,22 @@ {
     "gzipped": 1108
+  },
+  "web.js": {
+    "bundled": 5011,
+    "minified": 2606,
+    "gzipped": 1062,
+    "treeshaked": {
+      "rollup": {
+        "code": 2344,
+        "import_statements": 109
+      },
+      "webpack": {
+        "code": 3613
+      }
+    }
+  },
+  "web.cjs.js": {
+    "bundled": 5836,
+    "minified": 2823,
+    "gzipped": 1115
   }
 }

dist/web.cjs.js

@@ -73,6 +73,7 @@ 'use strict';
 
-    return [resizeDebounce ? debounce.debounce(callback, resizeDebounce) : callback, scrollDebounce ? debounce.debounce(callback, scrollDebounce) : callback];
+    return [callback, resizeDebounce ? debounce.debounce(callback, resizeDebounce) : callback, scrollDebounce ? debounce.debounce(callback, scrollDebounce) : callback];
   }, [set, scrollDebounce, resizeDebounce]),
-      resizeChange = _useMemo[0],
-      scrollChange = _useMemo[1]; // cleanup current scroll-listeners / observers
+      forceRefresh = _useMemo[0],
+      resizeChange = _useMemo[1],
+      scrollChange = _useMemo[2]; // cleanup current scroll-listeners / observers
 
@@ -83,3 +84,3 @@
       state.current.scrollContainers.forEach(function (element) {
-        element.removeEventListener('scroll', scrollChange, true);
+        return element.removeEventListener('scroll', scrollChange, true);
       });
@@ -97,6 +98,3 @@ state.current.scrollContainers = null;
   function addListeners() {
-    if (!state.current.element) {
-      return;
-    }
-
+    if (!state.current.element) return;
     state.current.resizeObserver = new ResizeObserver(scrollChange);
@@ -107,3 +105,3 @@ state.current.resizeObserver.observe(state.current.element);
       state.current.scrollContainers.forEach(function (scrollContainer) {
-        scrollContainer.addEventListener('scroll', scrollChange, {
+        return scrollContainer.addEventListener('scroll', scrollChange, {
           capture: true,
@@ -118,6 +116,3 @@ passive: true
   var ref = function ref(node) {
-    if (!node || node === state.current.element) {
-      return;
-    }
-
+    if (!node || node === state.current.element) return;
     removeListeners();
@@ -141,3 +136,3 @@ state.current.element = node;
   }, []);
-  return [ref, bounds];
+  return [ref, bounds, forceRefresh];
 } // Adds native resize listener to window
@@ -151,3 +146,3 @@
     return function () {
-      window.removeEventListener('resize', cb);
+      return void window.removeEventListener('resize', cb);
     };
@@ -166,3 +161,3 @@ }, [onWindowResize]);
       return function () {
-        return window.removeEventListener('scroll', _cb, true);
+        return void window.removeEventListener('scroll', _cb, true);
       };
@@ -169,0 +164,0 @@ }

dist/web.js

@@ -39,3 +39,3 @@ import { useState, useRef, useMemo, useEffect } from 'react';
 
-  const [resizeChange, scrollChange] = useMemo(() => {
+  const [forceRefresh, resizeChange, scrollChange] = useMemo(() => {
     const callback = () => {
@@ -67,3 +67,3 @@ if (!state.current.element) return;
 
-    return [resizeDebounce ? debounce(callback, resizeDebounce) : callback, scrollDebounce ? debounce(callback, scrollDebounce) : callback];
+    return [callback, resizeDebounce ? debounce(callback, resizeDebounce) : callback, scrollDebounce ? debounce(callback, scrollDebounce) : callback];
   }, [set, scrollDebounce, resizeDebounce]); // cleanup current scroll-listeners / observers
@@ -73,5 +73,3 @@
     if (state.current.scrollContainers) {
-      state.current.scrollContainers.forEach(element => {
-        element.removeEventListener('scroll', scrollChange, true);
-      });
+      state.current.scrollContainers.forEach(element => element.removeEventListener('scroll', scrollChange, true));
       state.current.scrollContainers = null;
@@ -88,6 +86,3 @@ }
   function addListeners() {
-    if (!state.current.element) {
-      return;
-    }
-
+    if (!state.current.element) return;
     state.current.resizeObserver = new ResizeObserver(scrollChange);
@@ -97,8 +92,6 @@ state.current.resizeObserver.observe(state.current.element);
     if (scroll && state.current.scrollContainers) {
-      state.current.scrollContainers.forEach(scrollContainer => {
-        scrollContainer.addEventListener('scroll', scrollChange, {
-          capture: true,
-          passive: true
-        });
-      });
+      state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {
+        capture: true,
+        passive: true
+      }));
     }
@@ -109,6 +102,3 @@ } // the ref we expose to the user
   const ref = node => {
-    if (!node || node === state.current.element) {
-      return;
-    }
-
+    if (!node || node === state.current.element) return;
     removeListeners();
@@ -129,6 +119,4 @@ state.current.element = node;
 
-  useEffect(() => {
-    return removeListeners;
-  }, []);
-  return [ref, bounds];
+  useEffect(() => removeListeners, []);
+  return [ref, bounds, forceRefresh];
 } // Adds native resize listener to window
@@ -141,5 +129,3 @@
     window.addEventListener('resize', cb);
-    return () => {
-      window.removeEventListener('resize', cb);
-    };
+    return () => void window.removeEventListener('resize', cb);
   }, [onWindowResize]);
@@ -156,3 +142,3 @@ }
       });
-      return () => window.removeEventListener('scroll', cb, true);
+      return () => void window.removeEventListener('scroll', cb, true);
     }
@@ -159,0 +145,0 @@ }, [onScroll, enabled]);

package.json

 {
   "name": "react-use-measure",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "measure view bounds",
@@ -10,3 +10,3 @@ "main": "./dist/web.cjs.js",
   "scripts": {
-    "prebuild": "rimraf dist && npm run typegen && npm run test && node ssr-test",
+    "prebuild": "rimraf dist && npm run typegen",
     "build": "rollup -c",
@@ -50,58 +50,58 @@ "prepare": "npm run build",
   "peerDependencies": {
-    "react": ">=16.11",
-    "react-dom": ">=16.11"
+    "react": ">=16.13",
+    "react-dom": ">=16.13"
   },
   "devDependencies": {
-    "@babel/core": "7.6.4",
-    "@babel/plugin-transform-modules-commonjs": "7.6.0",
-    "@babel/plugin-transform-parameters": "7.4.4",
-    "@babel/plugin-transform-runtime": "7.6.2",
-    "@babel/plugin-transform-template-literals": "7.4.4",
-    "@babel/preset-env": "7.6.3",
-    "@babel/preset-react": "7.6.3",
-    "@babel/preset-typescript": "^7.6.0",
-    "@babel/register": "^7.7.0",
-    "@testing-library/react": "^9.3.2",
+    "@babel/core": "7.10.2",
+    "@babel/plugin-transform-modules-commonjs": "7.10.1",
+    "@babel/plugin-transform-parameters": "7.10.1",
+    "@babel/plugin-transform-runtime": "7.10.1",
+    "@babel/plugin-transform-template-literals": "7.10.1",
+    "@babel/preset-env": "7.10.2",
+    "@babel/preset-react": "7.10.1",
+    "@babel/preset-typescript": "^7.10.1",
+    "@babel/register": "^7.10.1",
+    "@testing-library/react": "^10.2.1",
     "@types/debounce": "^1.2.0",
-    "@types/expect": "^1.20.4",
+    "@types/expect": "^24.3.0",
     "@types/lodash-es": "^4.17.3",
-    "@types/mocha": "^5.2.7",
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.9.3",
-    "@types/styled-components": "^4.1.20",
-    "@typescript-eslint/eslint-plugin": "^2.6.0",
-    "@typescript-eslint/parser": "^2.6.0",
-    "babel-eslint": "^10.0.3",
-    "babel-loader": "^8.0.6",
+    "@types/mocha": "^7.0.2",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "@types/styled-components": "^5.1.0",
+    "@typescript-eslint/eslint-plugin": "^3.1.0",
+    "@typescript-eslint/parser": "^3.1.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "^6.6.0",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^2.2.0",
-    "expect": "^24.9.0",
-    "husky": "^3.0.9",
-    "karma": "^4.4.1",
+    "eslint": "^7.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
+    "expect": "^26.0.1",
+    "husky": "^4.2.5",
+    "karma": "^5.0.9",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-mocha": "^1.3.0",
+    "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.2",
-    "mocha": "^6.2.2",
-    "prettier": "^1.18.2",
-    "pretty-quick": "^2.0.0",
-    "puppeteer": "^2.0.0",
+    "mocha": "^7.2.0",
+    "prettier": "^2.0.5",
+    "pretty-quick": "^2.0.1",
+    "puppeteer": "^3.3.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "resize-observer-polyfill": "^1.5.1",
-    "rimraf": "^3.0.0",
-    "rollup": "^1.26.3",
-    "rollup-plugin-babel": "^4.3.3",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.13.1",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-size-snapshot": "^0.10.0",
-    "styled-components": "^4.4.1",
-    "typescript": "^3.6.4",
-    "webpack": "^4.41.2"
+    "rollup-plugin-size-snapshot": "^0.12.0",
+    "styled-components": "^5.1.1",
+    "typescript": "^3.9.5",
+    "webpack": "^4.43.0"
   },
@@ -108,0 +108,0 @@ "dependencies": {

readme.md

@@ -65,6 +65,6 @@ <p align="center">
 ```jsx
-import polyfill from '@juggle/resize-observer'
+import { ResizeObserver } from '@juggle/resize-observer'
 
 function App() {
-  const [ref, bounds] = useMeasure({ polyfill })
+  const [ref, bounds] = useMeasure({ polyfill: ResizeObserver })
 ```
@@ -71,0 +71,0 @@

src/web/index.ts

@@ -25,3 +25,3 @@ import { useEffect, useState, useRef, useMemo } from 'react'
 
-type Result = [(element: HTMLElement | null) => void, RectReadOnly]
+type Result = [(element: HTMLElement | null) => void, RectReadOnly, () => void]
 
@@ -63,8 +63,3 @@ type State = {
   // keep all state in a ref
-  const state = useRef<State>({
-    element: null,
-    scrollContainers: null,
-    resizeObserver: null,
-    lastBounds: bounds,
-  })
+  const state = useRef<State>({ element: null, scrollContainers: null, resizeObserver: null, lastBounds: bounds })
 
@@ -76,3 +71,3 @@ // set actual debounce values early, so effects know if they should react accordingly
   // memoize handlers, so event-listeners know when they should update
-  const [resizeChange, scrollChange] = useMemo(() => {
+  const [forceRefresh, resizeChange, scrollChange] = useMemo(() => {
     const callback = () => {
@@ -89,3 +84,3 @@ if (!state.current.element) return
         y,
-      } = state.current.element.getBoundingClientRect() as RectReadOnly
+      } = (state.current.element.getBoundingClientRect() as unknown) as RectReadOnly
       const size = { left, top, width, height, bottom, right, x, y }
@@ -96,2 +91,3 @@ Object.freeze(size)
     return [
+      callback,
       resizeDebounce ? createDebounce(callback, resizeDebounce) : callback,
@@ -105,5 +101,3 @@ scrollDebounce ? createDebounce(callback, scrollDebounce) : callback,
     if (state.current.scrollContainers) {
-      state.current.scrollContainers.forEach(element => {
-        element.removeEventListener('scroll', scrollChange, true)
-      })
+      state.current.scrollContainers.forEach((element) => element.removeEventListener('scroll', scrollChange, true))
       state.current.scrollContainers = null
@@ -120,12 +114,9 @@ }
   function addListeners() {
-    if (!state.current.element) {
-      return
-    }
+    if (!state.current.element) return
     state.current.resizeObserver = new ResizeObserver(scrollChange)
     state.current.resizeObserver!.observe(state.current.element)
-
     if (scroll && state.current.scrollContainers) {
-      state.current.scrollContainers.forEach(scrollContainer => {
+      state.current.scrollContainers.forEach((scrollContainer) =>
         scrollContainer.addEventListener('scroll', scrollChange, { capture: true, passive: true })
-      })
+      )
     }
@@ -136,10 +127,6 @@ }
   const ref = (node: HTMLElement | null) => {
-    if (!node || node === state.current.element) {
-      return
-    }
+    if (!node || node === state.current.element) return
     removeListeners()
-
     state.current.element = node
     state.current.scrollContainers = findScrollContainers(node)
-
     addListeners()
@@ -159,7 +146,4 @@ }
   // remove all listeners when the components unmounts
-  useEffect(() => {
-    return removeListeners
-  }, [])
-
-  return [ref, bounds]
+  useEffect(() => removeListeners, [])
+  return [ref, bounds, forceRefresh]
 }
@@ -172,5 +156,3 @@
     window.addEventListener('resize', cb)
-    return () => {
-      window.removeEventListener('resize', cb)
-    }
+    return () => void window.removeEventListener('resize', cb)
   }, [onWindowResize])
@@ -183,3 +165,3 @@ }
       window.addEventListener('scroll', cb, { capture: true, passive: true })
-      return () => window.removeEventListener('scroll', cb, true)
+      return () => void window.removeEventListener('scroll', cb, true)
     }
@@ -194,3 +176,3 @@ }, [onScroll, enabled])
   const { overflow, overflowX, overflowY } = window.getComputedStyle(element)
-  if ([overflow, overflowX, overflowY].some(prop => prop === 'auto' || prop === 'scroll')) result.push(element)
+  if ([overflow, overflowX, overflowY].some((prop) => prop === 'auto' || prop === 'scroll')) result.push(element)
   return [...result, ...findScrollContainers(element.parentElement)]
@@ -201,3 +183,3 @@ }
 const keys: (keyof RectReadOnly)[] = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height']
-const areBoundsEqual = (a: RectReadOnly, b: RectReadOnly): boolean => keys.every(key => a[key] === b[key])
+const areBoundsEqual = (a: RectReadOnly, b: RectReadOnly): boolean => keys.every((key) => a[key] === b[key])
 
@@ -204,0 +186,0 @@ export default useMeasure

types/index.d.ts

@@ -20,3 +20,3 @@ declare type ResizeObserverCallback = (entries: any[], observer: ResizeObserver) => void
 }
-declare type Result = [(element: HTMLElement | null) => void, RectReadOnly]
+declare type Result = [(element: HTMLElement | null) => void, RectReadOnly, () => void]
 export declare type Options = {
@@ -23,0 +23,0 @@ debounce?:

No alert changes

Improved metrics

Total package byte prevSize

546887

increased by0.06%

Worsened metrics

Lines of code

1002

decreased by-0.99%

No dependency changes