SSE Hooks

useResizeObserver

Custom hook that observes the size of an element using the [ResizeObserver API](https://developer.

Installation

npx sse-tool add use-resize-observer

Usage

import { useResizeObserver } from "./{hooks file}";

const myRef = useRef(null);
const { width = 0, height = 0 } = useResizeObserver({
  ref: myRef,
  box: "content-box",
});

<div ref={myRef}>Hello, world!</div>;

API

Parameters

NameTypeDescription
optionsUseResizeObserverOptionsThe options for the ResizeObserver.

Return Value

Returns Size.

  • The size of the observed element.

Changelog

c165d — feat: enhance useRoleGuard and useSSR hooks with additional options and documentation

30da4 — feat: add new hooks and their metadata

cf13e — feat: add custom hooks for step navigation, ternary dark mode, timeout, toggle, unmount, and window size

Built with Love • © 2026