@oberoncms/core/dist/hooks/use-fit-zoom.js

OberonCMS is a cloud deployable CMS written in typescript based on the Puck visual editor

import { useState, useRef, useLayoutEffect } from "react";
const useFitZoom = (targetWidth) => {
  const [scale, setScale] = useState(1);
  const [scaledHeight, setScaledHeight] = useState("100%");
  const containerRef = useRef(null);
  useLayoutEffect(() => {
    const element = containerRef.current;
    if (!element) return;
    const observer = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const containerHeight = element.getBoundingClientRect().height;
        if (targetWidth === "100%" || targetWidth === 0) {
          setScale(1);
          setScaledHeight(containerHeight);
          return;
        }
        const containerWidth = entry.contentRect.width;
        const newScale = Math.min(containerWidth / targetWidth, 1);
        setScale(newScale);
        setScaledHeight(containerHeight / newScale);
      }
    });
    observer.observe(element);
    return () => observer.disconnect();
  }, [targetWidth]);
  return { ref: containerRef, scale, scaledHeight };
};
export {
  useFitZoom
};