useResizeObserver

Custom hook that observes the size of an element using the ResizeObserver API.

Installation

npx sse-hooks add use-resize-observer

yarn dlx sse-hooks add use-resize-observer

pnpm dlx sse-hooks add use-resize-observer

deno run -A npm:sse-hooks add use-resize-observer

bunx sse-hooks add use-resize-observer

Usage

example.ts

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

Prop	Default	Type
`options`	-	`UseResizeObserverOptions<T>` The options for the ResizeObserver.

Returns

Return Value	Default	Type
`height`	-	`number` The height of the observed element.
`width`	-	`number` The width of the observed element.

Types Aliases

No specific type aliases defined for this component.

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

useMediaSession

Custom hook that interacts with the Media Session API. It allows you to customize media notifications and handle media control events (like play, pause, next track) from the system's notification area or lock screen.

useScreen

Custom hook that tracks the `screen` dimensions and properties.