Top community members

Welcome to Dirask IT community! ❤ 💻
We are community that shares solutions with each other.

If you think you have something to add here.

you are welcome with your fresh ideas - List Articles

[Edit]
EN

React - get react component size before render operation

3 points
Created by:
AnnLen
1662

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>

 

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more