summaryrefslogtreecommitdiff
path: root/apps/web/src/hooks/use-container-size.ts
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/hooks/use-container-size.ts')
-rw-r--r--apps/web/src/hooks/use-container-size.ts29
1 files changed, 29 insertions, 0 deletions
diff --git a/apps/web/src/hooks/use-container-size.ts b/apps/web/src/hooks/use-container-size.ts
new file mode 100644
index 00000000..8b46f20e
--- /dev/null
+++ b/apps/web/src/hooks/use-container-size.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+export function useContainerSize({
+ containerRef,
+}: {
+ containerRef: React.RefObject<HTMLElement | null>;
+}) {
+ const [size, setSize] = useState({ width: 0, height: 0 });
+
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+
+ const observer = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ const { width, height } = entry.contentRect;
+ setSize({ width, height });
+ }
+ });
+
+ observer.observe(container);
+
+ return () => {
+ observer.disconnect();
+ };
+ }, [containerRef]);
+
+ return size;
+}