Support for wrapped references? about use-resize-observer HOT 3 CLOSED

import React, { useRef } from "react";
import ReactDOM from "react-dom";
import useResizeObserver from "use-resize-observer";

// All mutable state related to canvas fused into one type
type CanvasState = {
  canvas: HTMLCanvasElement;
  // Other stateful data related to canvas, e.g., data needed for hitbox testing.
  hitboxes: Path2D[];
};

function Canvas() {
  const canvasStateRef = useRef<CanvasState | null>(null);

  const { ref: callbackRef } = useResizeObserver<HTMLCanvasElement>({
    onResize: ({ width, height }) => {
      console.log(`Resized to ${width} x ${height}`);
      // Omitting code for re-rendering canvas...
    },
  });

  return (
    <canvas
      ref={(element) => {
        if (
          !canvasStateRef.current &&
          element !== null &&
          canvasStateRef.current !== element
        ) {
          canvasStateRef.current = {
            canvas: element,
            hitboxes: [],
          };
          callbackRef(element);
        }
      }}
      style={{
        width: "200px",
        height: "200px",
      }}
    />
  );
}

ReactDOM.render(
  <React.StrictMode>
    <Canvas />
  </React.StrictMode>,
  document.getElementById("root")
);