SSE Hooks

useIntersectionObserver

Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the [Intersection Observer API](https://developer.

Installation

npx sse-tool add use-intersection-observer

Usage

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

// Example 1
const [ref, isIntersecting, entry] = useIntersectionObserver({
  threshold: 0.5,
});

// Example 2
const { ref, isIntersecting, entry } = useIntersectionObserver({
  threshold: 0.5,
});

API

Parameters

NameTypeDescription
optionsUseIntersectionObserverOptionsThe options for the Intersection Observer.

Return Value

Returns IntersectionReturn.

The ref callback, a boolean indicating if the element is intersecting, and the intersection observer entry.

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