@daaler/jutils 0.4.2 → 0.4.3

package/dist/react/types.d.ts

@@ -1,4 +1,5 @@
 export type LayoutStyle = ["large" | "narrow" | "short", "top" | "left"];
+export type Dimensions = [number, number];
 export type Options = {
     widthThreshold?: number;
     heightThreshold?: number;

package/dist/react/useElementDimensions.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+import { type Dimensions } from "./types.js";
+/**
+ * Measure an element in the browser ui
+ * @param element Element to measure
+ * @return Width and height of the element
+ */
+export default function useElementDimensions(element: RefObject<HTMLElement>): Dimensions;

package/dist/react/useElementDimensions.js

@@ -0,0 +1,23 @@
+import { useState, useLayoutEffect } from "react";
+/**
+ * Measure an element in the browser ui
+ * @param element Element to measure
+ * @return Width and height of the element
+ */
+export default function useElementDimensions(element) {
+    const [dimensions, setDimensions] = useState([0, 0]);
+    const handleResize = () => {
+        if (!element.current)
+            return;
+        const { clientWidth, clientHeight } = element.current;
+        setDimensions([clientWidth, clientHeight]);
+    };
+    useLayoutEffect(() => {
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => { window.removeEventListener("resize", handleResize); };
+    }, [element]);
+    return dimensions;
+}
+;
+//# sourceMappingURL=useElementDimensions.js.map

package/dist/react/useElementDimensions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementDimensions.js","sourceRoot":"","sources":["../../src/react/useElementDimensions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAC,eAAe,EAAY,MAAM,OAAO,CAAC;AAK3D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,OAA8B;IAC1E,MAAM,CAAE,UAAU,EAAC,aAAa,CAAE,GAAG,QAAQ,CAAa,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,CAAA;IAEhE,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAG,CAAC,OAAO,CAAC,OAAO;YAAE,OAAO;QAC5B,MAAM,EAAE,WAAW,EAAC,YAAY,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;QACrD,aAAa,CAAC,CAAE,WAAW,EAAC,YAAY,CAAE,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACpB,YAAY,EAAE,CAAC;QACf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QAC/C,OAAO,GAAG,EAAE,GAAG,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA,CAAC,CAAC,CAAA;IACpE,CAAC,EAAC,CAAE,OAAO,CAAE,CAAC,CAAA;IAEd,OAAO,UAAU,CAAC;AACnB,CAAC;AAAA,CAAC"}

package/dist/react.d.ts

@@ -2,5 +2,6 @@ export * from "./browser.js";
 export { default as useToggle } from "./react/useToggle.js";
 export { default as useLayoutStyle } from "./react/useLayoutStyle.js";
 export { default as useWindowLayoutStyle } from "./react/useWindowLayoutStyle.js";
+export { default as useElementDimensions } from "./react/useElementDimensions.js";
 export { default as useJLocation } from "./react/useJLocation.js";
 export { default as useJNavigate } from "./react/useJNavigate.js";

package/dist/react.js

@@ -2,6 +2,7 @@ export * from "./browser.js";
 export { default as useToggle } from "./react/useToggle.js";
 export { default as useLayoutStyle } from "./react/useLayoutStyle.js";
 export { default as useWindowLayoutStyle } from "./react/useWindowLayoutStyle.js";
+export { default as useElementDimensions } from "./react/useElementDimensions.js";
 export { default as useJLocation } from "./react/useJLocation.js";
 export { default as useJNavigate } from "./react/useJNavigate.js";
 //# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@daaler/jutils",
-	"version": "0.4.2",
+	"version": "0.4.3",
 	"description": "Utility functions for js",
 	"author": "Jarno Parviainen - jarno.parviainen@gmail.com",
 	"license": "UNLICENSED",