When building React apps, it is sometimes advantageous for components to have awareness of their size and position on screen. This is useful both for rendering content initially, but also for components that need to know when their size changes. Some examples of this are:
- Components that need to lay out their content differently depending on size. For example, a responsive layout that changes from 1 to 2 columns or a dropdown that switches to a hamburger when it is width-constrained.
- When using an HTML5 Canvas that has to be re-drawn whenever its size changes
- When building a layout where the user can adjust the sizes of different panes
- When using elements or 3rd party libraries that require a known size like react-virtualized, fixed-data-table, etc.
- When rendering elements with absolute positioning that need their position adjusted when the container size changes.
- When animating an element’s size with CSS with additional logic that depends on this animated size
Some of these behaviors may be achievable with CSS, or by managing window size with the
onResize event, but in the interest of building React components that are maximally reusable, it makes sense to encapsulate this logic into the component itself. That way, regardless of where/how the component is used, it will function correctly.
Luckily there are a few excellent libraries that help solve this problem. Here, I’ll give a brief introduction to each and explain when to use it.
react-measure is a helpful library for building size-aware components. It wraps a component and exposes an
onResize function that is called with the element’s contentRect (which has bounds and position). This method is called whenever the component’s size or position changes, and can be used to trigger side effects or put the dimensions into state.
This solves most of the earlier examples but there’s one issue — a chicken and egg problem. When the component renders for the first time, its dimensions aren’t always known since its width/height could be determined by its content. As such, we don’t always know the dimensions in the
render function, so it’s not entirely possible for the component to have render logic based on its dimensions.
To solve this problem, we turn to a library called
react-sizeme. This library is similar to
react-measure but uses a clever solution to solve the aforementioned problem.
react-sizeme does an initial, invisible render of the component to measure its size. It does so in a lightweight way that is less intense than doing a full render of the component. Then, when the component renders, the size is known and the component can render properly from the beginning. Thus, the component can have
render logic based on its own dimensions!
react-sizeme looks like this:
With both of these libraries there are a few caveats to be aware of. The initial render that
react-sizeme does to determine the component’s dimensions isn’t free, and does increase the time to visibility of a rendered component. This is not typically noticeable for components that mount once, but with components that mount many times (items in a virtual list, for example) there is a noticeable performance impact. Since
react-measure doesn’t do this initial render, it should ideally be used in these cases.
The methods that both libraries use to detect size changes also have a slight latency (~20ms). Usually this feels quite fast, but in practice, I’ve noticed a slight delay in detecting changes which can lead to a component feeling slow.
react-measure has less of a performance impact, so it should be used if possible, but in cases where a component’s initial render depends on its size, then
react-sizeme is a good option.
Compute measurements of React components. Uses a ResizeObserver to detect when an element’s dimensions have changed. Includes a polyfill for ResizeObserver in unsupported browsers. yarn add react-measure npm install react-measure –save Wrap any child component and calculate its client rect. Adds the following to contentRect.client returned in the child function.
Make your React Components aware of their width and/or height! Hyper Responsive Components! Performant. Easy to use. Extensive browser support. Supports functional and class Component types. Tiny bundle size. Demo: https://4mkpc.csb.app/ Use it via the render prop pattern (supports children or render prop): Or, via a higher order component: Give your Components the ability to have render logic based on their height and/or width.
Cut through the noise of traditional React error reporting with LogRocketLogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.
LogRocket automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.
Focus on the React bugs that matter — try LogRocket today.