Languages
[Edit]
PL

React - komponent AutoSizer

3 points
Created by:
Dirask JS Member
3430

W tym artykule chcieliby┼Ťmy pokaza─ç, jak w Reakcie┬ámonitorowa─ç aktualny rozmiar elementu┬ádiv┬áza pomoc─ů┬ákomponentu┬áAutoSizer.

AutoSizer pozwala obsłużyć wydarzenie onResize.

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

// Przykład:

const App = () => (
  <div>
    <h1>Moja strona!</h1>
    <AutoSizer style={{background: '#e1e1e1', width: '400px'}}>
      {(width, height) => {
      	return (
          <pre>
			Kontener:<br />
			- szeroko┼Ť─ç: {width}<br />
			- wysoko┼Ť─ç: {height}
		  </pre>
        );
      }}
    </AutoSizer>
  </div>
);

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

ReactJS (PL)

React - komponent AutoSizer
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