@react-hook/size - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/main/index.js

@@ -75,23 +75,20 @@ 'use strict'
     const targetEl = target && 'current' in target ? target.current : target
-    const initialRect = targetEl
-      ? targetEl.getBoundingClientRect()
-      : {
-          width:
-            (_options$initialWidth =
-              options === null || options === void 0
-                ? void 0
-                : options.initialWidth) !== null &&
-            _options$initialWidth !== void 0
-              ? _options$initialWidth
-              : 0,
-          height:
-            (_options$initialHeigh =
-              options === null || options === void 0
-                ? void 0
-                : options.initialHeight) !== null &&
-            _options$initialHeigh !== void 0
-              ? _options$initialHeigh
-              : 0,
-        }
-    return [initialRect.width, initialRect.height]
+    return targetEl
+      ? [targetEl.offsetWidth, targetEl.offsetHeight]
+      : [
+          (_options$initialWidth =
+            options === null || options === void 0
+              ? void 0
+              : options.initialWidth) !== null &&
+          _options$initialWidth !== void 0
+            ? _options$initialWidth
+            : 0,
+          (_options$initialHeigh =
+            options === null || options === void 0
+              ? void 0
+              : options.initialHeight) !== null &&
+          _options$initialHeigh !== void 0
+            ? _options$initialHeigh
+            : 0,
+        ]
   })
@@ -101,9 +98,8 @@ ;(0, _passiveLayoutEffect.default)(() => {
     if (!targetEl) return
-    const rect = targetEl.getBoundingClientRect()
-    setSize([rect.width, rect.height])
+    setSize([targetEl.offsetWidth, targetEl.offsetHeight])
   }, [target]) // Where the magic happens
 
   ;(0, _resizeObserver.default)(target, (entry) => {
-    const {width, height} = entry.contentRect
-    setSize([width, height])
+    const target = entry.target
+    setSize([target.offsetWidth, target.offsetHeight])
   })
@@ -110,0 +106,0 @@ return size

dist/module/index.js

@@ -16,23 +16,20 @@ import * as React from 'react'
     const targetEl = target && 'current' in target ? target.current : target
-    const initialRect = targetEl
-      ? targetEl.getBoundingClientRect()
-      : {
-          width:
-            (_options$initialWidth =
-              options === null || options === void 0
-                ? void 0
-                : options.initialWidth) !== null &&
-            _options$initialWidth !== void 0
-              ? _options$initialWidth
-              : 0,
-          height:
-            (_options$initialHeigh =
-              options === null || options === void 0
-                ? void 0
-                : options.initialHeight) !== null &&
-            _options$initialHeigh !== void 0
-              ? _options$initialHeigh
-              : 0,
-        }
-    return [initialRect.width, initialRect.height]
+    return targetEl
+      ? [targetEl.offsetWidth, targetEl.offsetHeight]
+      : [
+          (_options$initialWidth =
+            options === null || options === void 0
+              ? void 0
+              : options.initialWidth) !== null &&
+          _options$initialWidth !== void 0
+            ? _options$initialWidth
+            : 0,
+          (_options$initialHeigh =
+            options === null || options === void 0
+              ? void 0
+              : options.initialHeight) !== null &&
+          _options$initialHeigh !== void 0
+            ? _options$initialHeigh
+            : 0,
+        ]
   })
@@ -42,9 +39,8 @@ useLayoutEffect(() => {
     if (!targetEl) return
-    const rect = targetEl.getBoundingClientRect()
-    setSize([rect.width, rect.height])
+    setSize([targetEl.offsetWidth, targetEl.offsetHeight])
   }, [target]) // Where the magic happens
 
   useResizeObserver(target, (entry) => {
-    const {width, height} = entry.contentRect
-    setSize([width, height])
+    const target = entry.target
+    setSize([target.offsetWidth, target.offsetHeight])
   })
@@ -51,0 +47,0 @@ return size

package.json

 {
   "name": "@react-hook/size",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "homepage": "https://github.com/jaredLunde/react-hook#readme",
@@ -5,0 +5,0 @@ "repository": "github:jaredLunde/react-hook",

README.md

@@ -38,2 +38,3 @@ <hr>
 
+- [x] Determines the size of the element including any padding, borders, and scroll bars.
 - [x] The size reported by the hook updates each time the size of the element changes.
@@ -40,0 +41,0 @@ - [x] Uses a single `ResizeObserver` for tracking all elements used by the hooks.

No alert changes

Improved metrics

Number of lines in readme file

93

increased by1.09%

Worsened metrics

Total package byte prevSize

16602

decreased by-2.15%

Lines of code

232

decreased by-6.83%

No dependency changes