useResizeObserver

Observes one or more elements for size changes using the ResizeObserver API. Targets can be Ref$, MaybeElement, or a plain Element.

Demo

width: 0pxheight: 0px

resize this textarea

Usage

import { useCallback } from "react";
import { useRef$, useResizeObserver } from "@usels/core";

function Component() {
  const el$ = useRef$<HTMLDivElement>();

  const handleResize = useCallback<ResizeObserverCallback>((entries) => {
    const { width, height } = entries[0].contentRect;
    console.log(width, height);
  }, []);

  useResizeObserver(el$, handleResize);

  return <div ref={el$} />;
}

With border-box

useResizeObserver(el$, handleResize, { box: "border-box" });

Stopping observation manually

const { stop } = useResizeObserver(el$, handleResize);

stop();

Checking browser support

const { isSupported$ } = useResizeObserver(el$, handleResize);

console.log(isSupported$.get()); // Observable<boolean>

Type Declarations

export { normalizeTargets } from "@usels/core/shared/normalizeTargets/index";
export interface UseResizeObserverOptions {
    box?: "content-box" | "border-box" | "device-pixel-content-box";
}
export interface UseResizeObserverReturn {
    isSupported$: Observable<boolean>;
    stop: () => void;
}
export declare function useResizeObserver(target: MaybeElement | MaybeElement[], callback: ResizeObserverCallback, options?: UseResizeObserverOptions): UseResizeObserverReturn;

Source

View on GitHub

Contributors

• tigerwest

Changelog

• a7392ab 2026-03-06 - feat(core,browser): add sync strategy hooks (tigerwest)