Resize Observer

The Resize Observer component offers a thin, declarative interface to the ResizeObserver API.

The resize observer will report changes to the dimensions of the elements it wraps through the wa-resize event. When emitted, a collection of ResizeObserverEntry objects will be attached to event.detail that contains the target element and information about its dimensions.

ResizeObserver(
  _.onResize.map { event =>
    dom.console.log(event.detail)
  } --> Observer.empty
)(
  div(
    cls("flex items-center justify-center text-center"),
    border  := "2px solid var(--wa-color-surface-border)",
    padding := "4rem 2rem",
    "Resize this box and watch the console 👉"
  )
)

ResizeObserver(  _.onResize.map { event =>    dom.console.log(event.detail)  } --> Observer.empty)(  div(    cls("flex items-center justify-center text-center"),    border  := "2px solid var(--wa-color-surface-border)",    padding := "4rem 2rem",    "Resize this box and watch the console 👉"  ))