#resize-observer

Web Platformintermediate

ResizeObserver for a responsive component with no resize listener

const setLayout = (el: HTMLElement, width: number) => {
  el.classList.toggle("is-wide", width >= 560);
  el.classList.toggle("is-compact", width < 320);
};

Give a component its own width-based breakpoints, driven by its actual box size instead of the window's, with no global resize listener at all.