Adjust element size based on container using CSS transform

use_resize_scale.ts

import { useLayoutEffect, useRef, useState } from "react";
import { flushSync } from "react-dom";

export function useResizeScale<
  ContainerRef extends HTMLElement,
  InnerRef extends HTMLElement,
>({ width }: { width: number }) {
  const containerRef = useRef<ContainerRef | null>(null);
  const innerRef = useRef<InnerRef | null>(null);
  const [innerStyle, setInnerStyle] = useState<React.CSSProperties>({});

  useLayoutEffect(() => {
    const adjustSize = () => {
      const iframe = innerRef.current;
      const container = containerRef.current;

      if (!iframe || !container) return;

      const scaleFactor = container.clientWidth / width;

      setInnerStyle({
        width,
        height: container.clientHeight / scaleFactor,
        transform: `scale(${scaleFactor})`,
        transformOrigin: "top left",
      });
    };

    adjustSize();

    const resizeObserver = new ResizeObserver(() => {
      // Use flushSync to prevent visual jitter from async state updates.
      flushSync(() => {
        adjustSize();
      });
    });

    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }

    return () => resizeObserver.disconnect();
  }, [width]);

  return { innerRef, containerRef, innerStyle };
}

Useful for scaling iframes

Demo:

resize_out.mp4