EN
React - get react component size before render operation
6
points
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
AutoSizerimplementation,- read this article to see external library that provides
AutoSizercomponent.
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 );