react-sizer-div

A div that tracks its own size and passes it to a render function.

Usage

import { SizerDiv } from 'react-sizer-div';

// ... in your JSX:
<SizerDiv render={({width, height}) => (
    <div>
        My container size is: {width}, {height}
    </div>
) />

The component accepts styles and className to allow styling.

SizerDiv renders a div, which by default uses block layout. This measures the container width and the height from the contents. If SizerDiv is styled with position: absolute and inset: 0 then it can measure the size of its positioning container.

The render function is only called once the size is resolved. So, width and height are always defined.

This uses ResizeObserver directly. If you need a polyfill for older browsers, you must add that independently.