Add useMeasure hook

2 files changed, 38 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/index.ts
index 9c07952615..ce0436ddc3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/index.ts
@@ -6,3 +6,4 @@ export * from './useHasAppUpgradeInitiated';
 export * from './useHasAppUpgradeVerifiedInstallerPath';
 export * from './useIsPlatformLinux';
 export * from './useShouldAppUpgradeInstallManually';
+export * from './useMeasure';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/useMeasure.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/useMeasure.ts
new file mode 100644
index 0000000000..5f5ed589bc
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/useMeasure.ts
@@ -0,0 +1,37 @@
+import { useState, useCallback, useLayoutEffect, RefCallback } from 'react';
+
+export interface MeasureSize {
+  width: number;
+  height: number;
+}
+
+export function useMeasure<T extends Element = HTMLElement>(): [RefCallback<T>, MeasureSize] {
+  const [size, setSize] = useState<MeasureSize>({ width: 0, height: 0 });
+  const [node, setNode] = useState<T | null>(null);
+
+  const ref: RefCallback<T> = useCallback((instance: T | null) => {
+    setNode(instance);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!node) return;
+
+    const measure = () => {
+      window.requestAnimationFrame(() => {
+        const rect = node.getBoundingClientRect();
+        setSize({ width: rect.width, height: rect.height });
+      });
+    };
+
+    measure();
+
+    const resizeObserver = new ResizeObserver(measure);
+    resizeObserver.observe(node);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [node]);
+
+  return [ref, size];
+}