React - skalowanie zawartości do rozmiaru kontenera (CSS transform scale)

W tym artykule chcielibyśmy pokazać, jak w Reakcie stworzyć komponent, który skaluje zawartość (element potomny) do rozmiaru kontenera, zachowując proporcje zawartości.

Takie podejście jest przydatne, jeśli chcemy skalować jakiś element, który musi mieć stały rozmiar, np. Google Ads w mobilnych przeglądarkach internetowych. Kod pozwala nam ustawić stały rozmiar treści, który będzie skalowany do rozmiaru komponentu kontenera z zachowaniem proporcji - rozwiązuje to problem elastycznych reklam GPT w przeglądarce internetowej.

Uwaga:

W tym artykule używamy komponentu AutoSizer, który pozwala na monitorowanie aktualnego rozmiaru elementu. Opisywaliśmy go już wcześniej - tutaj. 

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const AutoSizer = React.memo(({ interval, children, ...other }) => {
	const reference = React.useRef();
	const [size, setSize] = React.useState();
	React.useEffect(() => {
      	let storedWidth = size?.width;
      	let storedHeight = size?.height;
      	const id = setInterval(() => {
          	const element = reference.current;
        	if (element) {
              	const width = element.offsetWidth;
                const height = element.offsetHeight;
              	if (width != storedWidth || height != storedHeight) {
                  	storedWidth = width;
                  	storedHeight = height;
                    setSize({ width, height });
                }
            }
        }, interval ?? 100);
      	return () => {
        	clearInterval(id);
        };
	}, [interval]);
	return (
	  <div ref={reference} {...other}>
        {size && children && children(size.width, size.height)}
	  </div>
	);
});

const ContentStretcher = ({sizerInterval, contentWidth, contentHeight, children, ...other}) => (
  <AutoSizer
    {...other}
    style={{
      ...other.style,
      position: 'relative',
      display: 'flex'
    }}
    interval={sizerInterval}
  >
    {(containerWidth, containerHeight) => {
  		const contentScale =
              containerHeight * contentWidth < containerWidth * contentHeight
        	? containerHeight / contentHeight
        	: containerWidth / contentWidth;
  		return (
          <div
            style={{
              position: 'absolute',
              left: '50%',
              top: '50%',
              transform: `translate(-50%, -50%) scale(${contentScale})`,
              transformOrigin: '50% 50%',
            }}
          >
            {children}
          </div>
        );
    }}
  </AutoSizer>
);

// Przykład:

// Utworzymy element iframe z dirask.com, który zostanie przeskalowany do kontenera
// z zachowaniem proporcji treści.

const DiraskFrame = ({containerWidth, containerHeight, contentWidth, contentHeight}) => (
  <ContentStretcher
    style={{
        background: '#e1e1e1',
        width: `${containerWidth}px`,
        height: `${containerHeight}px`
    }}
    contentWidth={contentWidth}
    contentHeight={contentHeight}
  >
    <iframe
      src="https://dirask.com/about"
      style={{
        border: 'none',
        width: `${contentWidth}px`,
        height: `${contentHeight}px`
      }}
    />
  </ContentStretcher>
);

const App = () => (
  <div>
    <DiraskFrame
      containerWidth={100}
      containerHeight={100}
      contentWidth={200}
      contentHeight={200}
    />
    <br />
    <DiraskFrame
      containerWidth={300}
      containerHeight={300}
      contentWidth={200}
      contentHeight={200}
    />
    <br />
    <DiraskFrame
      containerWidth={300}
      containerHeight={200}
      contentWidth={150}
      contentHeight={150}
    />
    <br />
    <DiraskFrame
      containerWidth={200}
      containerHeight={300}
      contentWidth={150}
      contentHeight={150}
    />
  </div>
);

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );