Resize Observer

Ridho Anandamal

22 April 2023 • 0 minutes

The Resize Observer interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVG Element.

This playground using Vue

How to Create it

Lets create initital structure HTML.

index.html

<div ref="box" class="resize-observer">Resize Observer</div>

Then add javascript to observer box class

index.ts

const box = ref<HTMLDivElement | null>(null);
onMounted(() => {
  const resize = new ResizeObserver((entries, observer) => {
    entries.forEach((entry) => {
      console.log(`${entry.target.clientHeight} x ${entry.target.clientWidth}`);
    });
  });
  resize.observe(box.value!);

  onUnmounted(() => {
    // Dont forget to disconnect/unobserver when not use
    resize.disconnect();
  });
});

Then we add style

style.css

.resize-observer {
  width: 250px;
  height: 50px;
  position: relative;
  padding: 0.25rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 1px solid rgba(255, 255, 255, 0.7);
  transition: width 0.3s ease-in-out, letter-spacing 0.3s ease-in-out;
  position: relative;
  font-size: 1.5rem;
  color: white;
  font-weight: bold;
  text-align: center;
}
.resize-observer:hover {
  width: 300px;
  height: 60px;
}