ResponsiveFrame.js

/** ISC License (c) 2021 Alexey Raspopov */
import { useLayoutEffect, useRef, useState } from "react";
import cns from "./ResponsiveFrame.module.css"

export function ResponsiveFrame({ className, style, children }) {
  let sceneRef = useRef();
  let [width, height] = useElementSize(sceneRef);
  return (
    <div className={className} style={style} ref={sceneRef}>
      <svg className={cns.svgFrame} width={width} height={height}>
        {size != null ? children : null}
      </svg>
    </div>
  );
}

function useElementSize(ref) {
  let [size, setSize] = useState(null);
  useLayoutEffect(() => {
    let element = ref.current;
    if (element != null) {
      let rect = element.getBoundingClientRect();
      setSize([rect.width, rect.height]);
      let observer = new ResizeObserver((entries) => {
        if (entries.length > 0) {
          let rect = entries[0].contentRect;
          setSize([rect.width, rect.height]);
        }
      });
      observer.observe(element);
      return () => observer.disconnect();
    }
  }, []);
  return size;
}

ResponsiveFrame.module.css

.svgFrame {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  box-sizing: border-box;
}