@sohanemon/utils 4.1.1 → 4.1.2

package/dist/hooks/index.d.ts

@@ -94,15 +94,40 @@ export declare function useCopyToClipboard({ timeout }: {
 /**
  * Properties for height calculation.
  */
-type CalculationProps = {
+type CalculationProps2 = {
     blockIds: string[];
     dynamic?: boolean | string;
     margin?: number;
     substract?: boolean;
 };
 /**
+ *
  * Hook to calculate the height of an element based on viewport and other block heights.
  * @param params - Configuration object for height calculation.
  * @returns The calculated height.
  */
-export declare const useHeightCalculation: ({ blockIds, margin, substract, dynamic, }: CalculationProps) => number;
+export declare const useHeightCalculation: ({ blockIds, margin, substract, dynamic, }: CalculationProps2) => number;
+/**
+ * Properties for DOM calculation.
+ */
+type CalculationProps = {
+    blockIds: string[];
+    dynamic?: boolean | string;
+    margin?: number;
+    substract?: boolean;
+    onChange?: (results: {
+        blocksHeight: number;
+        blocksWidth: number;
+        remainingWidth: number;
+        remainingHeight: number;
+    }) => void;
+};
+/**
+ * Hook to calculate dimensions (height and width) of an element based on viewport and other block dimensions.
+ * @param params - Configuration object for dimension calculation.
+ * @returns An object containing the calculated height and width.
+ */
+export declare const useDomCalculation: ({ blockIds, margin, substract, dynamic, onChange, }: CalculationProps) => {
+    height: number;
+    width: number;
+};

package/dist/hooks/index.js

@@ -260,6 +260,7 @@ export function useCopyToClipboard({ timeout = 2000 }) {
     return { isCopied, copy };
 }
 /**
+ *
  * Hook to calculate the height of an element based on viewport and other block heights.
  * @param params - Configuration object for height calculation.
  * @returns The calculated height.
@@ -292,3 +293,47 @@ export const useHeightCalculation = ({ blockIds = [], margin = 0, substract = tr
     }, []);
     return height;
 };
+/**
+ * Hook to calculate dimensions (height and width) of an element based on viewport and other block dimensions.
+ * @param params - Configuration object for dimension calculation.
+ * @returns An object containing the calculated height and width.
+ */
+export const useDomCalculation = ({ blockIds = [], margin = 0, substract = true, dynamic = false, onChange, }) => {
+    const [dimensions, setDimensions] = React.useState({
+        height: 500,
+        width: 500,
+    });
+    const handleCalculation = () => {
+        const blocksHeight = blockIds.reduce((prevHeight, id) => prevHeight + (document.getElementById(id)?.clientHeight || 0), 0);
+        const blocksWidth = blockIds.reduce((prevWidth, id) => prevWidth + (document.getElementById(id)?.clientWidth || 0), 0);
+        const height = substract
+            ? window.innerHeight - blocksHeight - margin
+            : blocksHeight + margin;
+        const width = substract
+            ? window.innerWidth - blocksWidth - margin
+            : blocksWidth + margin;
+        const newDimensions = { height, width };
+        setDimensions(newDimensions);
+        onChange?.({
+            blocksWidth,
+            blocksHeight,
+            remainingWidth: width,
+            remainingHeight: height,
+        });
+    };
+    useIsomorphicEffect(() => {
+        handleCalculation();
+        if (!dynamic)
+            return;
+        if (typeof dynamic === 'string') {
+            const resizableElement = document.getElementById(dynamic);
+            const resizeObserver = new ResizeObserver(() => handleCalculation());
+            if (resizableElement)
+                resizeObserver.observe(resizableElement);
+            return () => resizeObserver.disconnect();
+        }
+        window.addEventListener('resize', handleCalculation);
+        return () => window.removeEventListener('resize', handleCalculation);
+    }, []);
+    return dimensions;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",
@@ -15,33 +15,19 @@
   },
   "typesVersions": {
     "*": {
-      "core": [
-        "dist/index.d.ts"
-      ],
-      "types": [
-        "dist/types/index.d.ts"
-      ],
-      "hooks": [
-        "dist/hooks/index.d.ts"
-      ],
-      "components": [
-        "dist/components/index.d.ts"
-      ]
+      "core": ["dist/index.d.ts"],
+      "types": ["dist/types/index.d.ts"],
+      "hooks": ["dist/hooks/index.d.ts"],
+      "components": ["dist/components/index.d.ts"]
     }
   },
-  "files": [
-    "dist",
-    "README.md"
-  ],
+  "files": ["dist", "README.md"],
   "scripts": {
     "build": "tsc",
     "build:watch": "tsc --watch",
     "export": "tsc && npm publish"
   },
-  "keywords": [
-    "utils",
-    "cn"
-  ],
+  "keywords": ["utils", "cn"],
   "license": "ISC",
   "devDependencies": {
     "@types/node": "^22.4.0",