Detecting an element is being resized with Javascript

Issue

With CSS' resize rule, one can allow an element to be resized like so:

.someClass {
  resize: vertical/horizontal/both
}

However, I'm unable to find a way to detect an element is being resized.

HTML' Drag and Drop API has built-in events to detect dragging which are documented here.

Is there a similar way I can detect when an element is being dragged, or make my own version?

Solution

You need to get the element by a selector. For example:

const element = document.querySelector('.someClass');

And then you can use resizeObserver:

const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
     console.log(entry)
  }
  console.log('Size changed');
  
});

resizeObserver.observe(element);

For more resources: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

Answered By - Mina