Skip to content

WIP - Add resizeObserver component

David Pisek requested to merge 366-add-resize-observer-component into master

What does this MR do

It adds a component that uses a ResizeObserver to detect if an element's size is changing. This approach has advantages over listening to window.resize:

  • Using window.resize can be wasteful as a change in the viewport's dimensions does not necessarily effect the element of interest
  • Updates to the DOM may change the layout and dimensions of elements but this does not get picked up by window.resize

Implementation Details

The component adds a div to the DOM, instantiates a ResizeObserver and subscribes the div to be observed.

The component emits a resize event whenever the ResizeObserver reports a change of the divs dimensions. The data provided by the ResizeObserver's notification gets passed on to the handler of the resize event.

The component also includes a default slot so the div can be used as a wrapper. If the default slot is empty and the div does have any content its tabindex will be set to -1.

Note: To cover all supported browsers it uses a polyfill for ResizeObserver.

Example Usage

<div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <resize-observer @resize="handleResizeEvent" />
</div>
Edited by David Pisek

Merge request reports