React - AutoSizer-Komponente

In diesem Artikel wird gezeigt, wie man in React die aktuelle Größe eines div-Elements mit hilfe der AutoSizer-Komponente kontrollieren kann. 

Mit AutoSizer kann man das Ereignis onResize bearbeiten. 

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren:
// 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>
	);
});

// Beispiel:

const App = () => (
  <div>
    <h1>Meine Webseite!</h1>
    <AutoSizer style={{background: '#e1e1e1', width: '400px'}}>
      {(width, height) => {
      	return (
          <pre>
			Container:<br />
			- Breite: {width}<br />
			- Höhe: {height}
		  </pre>
        );
      }}
    </AutoSizer>
  </div>
);

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