@radix-ui/react-use-size - npm Package Compare versions

Comparing version 0.1.2-rc.44 to 0.1.2-rc.45

dist/index.d.ts

@@ -1,2 +0,2 @@
-export function useSize(element: HTMLElement | SVGElement | null): {
+export function useSize(element: HTMLElement | null): {
     width: number;
@@ -3,0 +3,0 @@ height: number;

dist/index.js

 var $ksDzM$react = require("react");
+var $ksDzM$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
 
@@ -9,6 +10,12 @@ function $parcel$export(e, n, v, s) {
 
+
 function $d2c1d285af17635b$export$1ab7ae714698c4b8(element) {
     const [size, setSize] = $ksDzM$react.useState(undefined);
-    $ksDzM$react.useEffect(()=>{
+    $ksDzM$radixuireactuselayouteffect.useLayoutEffect(()=>{
         if (element) {
+            // provide size as early as possible
+            setSize({
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            });
             const resizeObserver = new ResizeObserver((entries)=>{
@@ -29,6 +36,5 @@ if (!Array.isArray(entries)) return;
                     // for browsers that don't support `borderBoxSize`
-                    // we calculate a rect ourselves to get the correct border box.
-                    const rect = element.getBoundingClientRect();
-                    width = rect.width;
-                    height = rect.height;
+                    // we calculate it ourselves to get the correct border box.
+                    width = element.offsetWidth;
+                    height = element.offsetHeight;
                 }
@@ -35,0 +41,0 @@ setSize({

dist/index.module.js

@@ -1,8 +0,15 @@
-import {useState as $9gyGR$useState, useEffect as $9gyGR$useEffect} from "react";
+import {useState as $9gyGR$useState} from "react";
+import {useLayoutEffect as $9gyGR$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
 
 
+
 function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
     const [size, setSize] = $9gyGR$useState(undefined);
-    $9gyGR$useEffect(()=>{
+    $9gyGR$useLayoutEffect(()=>{
         if (element) {
+            // provide size as early as possible
+            setSize({
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            });
             const resizeObserver = new ResizeObserver((entries)=>{
@@ -23,6 +30,5 @@ if (!Array.isArray(entries)) return;
                     // for browsers that don't support `borderBoxSize`
-                    // we calculate a rect ourselves to get the correct border box.
-                    const rect = element.getBoundingClientRect();
-                    width = rect.width;
-                    height = rect.height;
+                    // we calculate it ourselves to get the correct border box.
+                    width = element.offsetWidth;
+                    height = element.offsetHeight;
                 }
@@ -29,0 +35,0 @@ setSize({

package.json

 {
   "name": "@radix-ui/react-use-size",
-  "version": "0.1.2-rc.44",
+  "version": "0.1.2-rc.45",
   "license": "MIT",
@@ -18,4 +18,5 @@ "source": "src/index.ts",
   },
-  "devDependencies": {
-    "@types/resize-observer-browser": "^0.1.4"
+  "dependencies": {
+    "@babel/runtime": "^7.13.10",
+    "@radix-ui/react-use-layout-effect": "0.1.1-rc.45"
   },
@@ -25,2 +26,5 @@ "peerDependencies": {
   },
+  "devDependencies": {
+    "@types/resize-observer-browser": "^0.1.4"
+  },
   "homepage": "https://radix-ui.com/primitives",
@@ -34,6 +38,3 @@ "repository": {
   },
-  "dependencies": {
-    "@babel/runtime": "^7.13.10"
-  },
   "stableVersion": "0.1.1"
 }

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

Improved metrics

Total package byte prevSize

13512

increased by6.98%

Lines of code

108

increased by10.2%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Added@radix-ui/react-use-layout-effect@0.1.1-rc.45

• + Added@radix-ui/react-use-layout-effect@0.1.1-rc.45(transitive)