Languages
[Edit]
EN

React - get react component size before render operation

3 points
Created by:
AnnLen
1885

In this article, we're going to have a look at how to get componen size before rendering in React.

1. Getting element size with reference object exmaple

In this axample useRef function with ref attribute are used to get current size of element. Container componen is created with function based approach.

// ONLINE-RUNNER:browser;

<!DOCTYPE>
<html>
<head>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone/babel.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">

	// Uncomment next line during working with JSX Compiler:
	//import React from react';

	const Container = props => {
		const reference = React.useRef();
		const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });

		React.useEffect(() => {
			if (reference.current) {
				setDimensions({
					width: reference.current.offsetWidth,
					height: reference.current.offsetHeight
				});
			}
		}, []);

		return (
			<div ref={reference}>
				<pre>
					Container:<br />
					- width: {dimensions.width}<br />
					- height: {dimensions.height}
				</pre>
			</div>
		);
	};

	const App = () => (
		<div className="App">
			<h1>My page!</h1>
			<Container />
		</div>
	);

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

  </script>
</body>
</html>

2. Getting element size with ref property exmaple

In this axample ref attribute is used to get element reference. Container componen is created with class based approach.

// ONLINE-RUNNER:browser;

<!DOCTYPE>
<html>
<head>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone/babel.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">

	// Uncomment next line during working with JSX Compiler:
	//import React from react';

	class Container extends React.Component {
		constructor(props) {
			super(props);

			this.state = {
				dimensions: null
			};
		}

		componentDidMount() {
        	setTimeout(() => this.update());
		}

		update() {
        	this.setState({
				dimensions: {
					width: this.container.offsetWidth,
					height: this.container.offsetHeight,
				}
			});
        }
        
		render() {
			const { dimensions } = this.state;

			return (
				<div ref={e => (this.container = e)}>
					<pre>
						Container:<br />
						- width: {dimensions && dimensions.width}<br />
						- height: {dimensions && dimensions.height}
					</pre>
				</div>
			);
		}
	}

	const App = () => (
		<div className="App">
			<h1>My page!</h1>
			<Container />
		</div>
	);

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

  </script>
</body>
</html>

 

Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join