React - AutoSizer-Komponente

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