Resize Observers

The ResizeObserver component is a component hook for the ResizeObserver using the resize-observer-polyfill for browsers that don't support it yet. The main use-case for this component is when just a normal window resize event is not sufficient for calculating differences in sizes.

This component displays an empty span with aria-hidden to allow access to the DOM. By default it will attempt to watch changes on its parent component, but it can be configured to watch any element by using the target prop.

This is a simple example that shows how you can hook into the ResizeObserver to watch and display changes in height or width of a single element. The component below will randomly change max-height and max-width values to show live updates. You can also manually resize the browser to see how outside changes can also affect the size.

By default, the ResizeObserver will not listen to any resize events. You will need to enable watchHeight and/or watchWidth for the onResize callback to be called.

height:100
width:150