Earlier, almost all web applications and websites had fixed widths. Remember, we had a time where websites motivated us to view the particular website with a pre-defined resolution for best viewing. For example, some websites said that their content is clearly visible on a 1024x768 screen. For smaller screens, there was a horizontal scrollbar to see the hidden content. The responsive design term was trending in the 2010s. Everyone tried to make their websites friendly for any screen sizes with the help of CSS media queries. In other words, they made responsive UIs.

Nowadays, all web UI toolkits come with responsive design support out of the box. We don’t need to put more effort into making our UI friendly for different resolutions. Also, responsive design is not a buzzword anymore because it is like a standard now. We can indeed enhance the usability of our applications with some advanced responsive implementation concepts. Perhaps, your application has some resizable windows, expandable areas, and splitters that divide the viewport. You can build a more live UI by dynamically changing the UI elements according to the resize events. See the following situations for examples.

• To show and hide different UI elements according to a specific parent div ’s size.
• To apply different font sizes according to the screen size or a specific parent div ’s size.
• To Implement different modes for your application. For example, some applications activate different UI modes according to the available space on the screen.

What is ResizeObserver API?

The ResizeObserver interface detects size changes of given DOM elements. If there is a change in height or width, a callback function will be triggered with new sizes for each DOM element.

This API was added to the W3C specification as a standard API because the existing DOM size-change detection methods were hacky workarounds. In other words, even though there was a standard API to detect window resize events, there wasn’t a straightforward approach to observe the resizing events of a specific DOM element. Now, we can create next-level responsive UIs with ResizeObserver API without creating performance issues for your web application.

Moreover, the browser support for this API is good. All browsers except the Internet Explorer support ResizeObserver API.

How to use ResizeObserver API

Let’s check how we can use this API. First of all, we need to create a resize observer instance, as shown below.

let resizeObserver = new ResizeObserver(onResize);

The constructor accepts a callback function that will be triggered with resize events.

function onResize(entries) {
    // "entries" is an array of ResizeObserverEntry objects.
}

The ResizeObserverEntry object has information about new dimensions of the observed element.

Once the observer instance is created, you can observe any DOM element with the observe method, as shown below.

resizeObserver.observe(HTMLElement_1);
resizeObserver.observe(HTMLElement_2);
...
resizeObserver.observe(HTMLElement_n);

If you need to remove an element from the observer, you can use the unobserve method.

The following example has a resizable div element. When there is a change in width, different modes will be activated accordingly.

Check out the source code of the above example.

Conclusion

This API can be used with any front-end framework. Make sure to clear the observer while you are changing your views via the disconnect method. The disconnect method removes all attached elements from the observer instance.