feat: add custom useResizeObserver hook

The `use-resize-observer` library is not much maintained and doesn't support React 19.

Author: targos

package.json

@@ -50,8 +50,7 @@
   },
   "dependencies": {
     "@types/d3-scale": "^4.0.8",
-    "d3-scale": "^4.0.2",
-    "use-resize-observer": "^9.1.0"
+    "d3-scale": "^4.0.2"
   },
   "volta": {
     "node": "22.9.0"

src/components/ResponsiveChart.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
-import useResizeObserver from 'use-resize-observer';
+
+import { useResizeObserver } from '../hooks/use_resize_observer.js';
 
 export interface ResponsiveChartProps {
   width?: number | `${number}%`;
@@ -15,12 +16,11 @@ export function ResponsiveChart(props: ResponsiveChartProps) {
   const { width, height, minWidth, minHeight, maxWidth, maxHeight, children } =
     props;
 
-  // @ts-expect-error Default import is correct.
-  const observed = useResizeObserver<HTMLDivElement>();
+  const [observedRef, observedSize] = useResizeObserver();
 
   return (
     <div
-      ref={observed.ref}
+      ref={observedRef}
       style={{
         position: 'relative',
         flex: 1,
@@ -35,8 +35,8 @@ export function ResponsiveChart(props: ResponsiveChartProps) {
       <div
         style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
       >
-        {observed.width && observed.height
-          ? children({ width: observed.width, height: observed.height })
+        {observedSize
+          ? children({ width: observedSize.width, height: observedSize.height })
           : null}
       </div>
     </div>

src/hooks/use_resize_observer.ts

@@ -0,0 +1,32 @@
+import { useCallback, useRef, useState } from 'react';
+
+export function useResizeObserver() {
+  const [size, setSize] = useState<DOMRect>();
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  const refCallback = useCallback((node: HTMLElement | null) => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+
+    if (node) {
+      const updateSize = () => {
+        const rect = node.getBoundingClientRect();
+
+        setSize(rect);
+      };
+
+      updateSize();
+
+      const observer = new ResizeObserver(() => {
+        updateSize();
+      });
+
+      observer.observe(node);
+      observerRef.current = observer;
+    }
+  }, []);
+
+  return [refCallback, size] as const;
+}

src/index.ts

@@ -2,6 +2,7 @@ export * from './components/AlignGroup.js';
 export * from './components/ResponsiveChart.js';
 
 export * from './hooks/useBBoxObserver.js';
+export * from './hooks/use_resize_observer.js';
 export * from './hooks/useLinearPrimaryTicks.js';
 export * from './hooks/useLogTicks.js';
 export * from './hooks/useTimeTicks.js';

stories/components/ResponsiveChart.stories.tsx

@@ -115,7 +115,9 @@ export function SiblingVariable() {
     >
       <div style={{ flex: 2, height: 100, backgroundColor: 'yellow' }} />
       <ResponsiveChart>
-        {({ width, height }) => <TestChart width={width} height={height} />}
+        {({ width, height }) => (
+          <TestChart width={Math.round(width)} height={Math.round(height)} />
+        )}
       </ResponsiveChart>
       <VariableDiv>
         <div style={{ backgroundColor: 'red', height: '100%', color: 'white' }}>