Languages
[Edit]
PL

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

3 points
Created by:
Lily
238

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.

element iframe skalowany do rozmiaru kontenera
Element iframe skalowany do rozmiaru kontenera

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 );

ReactJS (PL)

React - skalowanie zawarto┼Ťci do rozmiaru kontenera
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join