Languages
[Edit]
EN

React - get react component size before render operation

6 points
Created by:
Kevin
457

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

Notes:

  • read this article to see simple custom AutoSizer implementation,
  • read this article to see external library that providesAutoSizer component.

1. Getting element size with functional component

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

// ONLINE-RUNNER:browser;

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

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 style={{background: '#e1e1e1', width: '400px'}}>
		<h1>My page!</h1>
		<Container />
	</div>
);

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

2. Getting element size with class component

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

// ONLINE-RUNNER:browser;

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

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 style={{background: '#e1e1e1', width: '400px'}}>
		<h1>My page!</h1>
		<Container />
	</div>
);

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS

React - get react component size
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