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.

Installation

npx sse-hooks add use-intersection-observer

yarn dlx sse-hooks add use-intersection-observer

pnpm dlx sse-hooks add use-intersection-observer

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

bunx sse-hooks add use-intersection-observer

Usage

example.ts

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

Prop	Default	Type
`options`	`{}`	`UseIntersectionObserverOptions` The options for the Intersection Observer.

Returns

Return Value	Default	Type
`return`	-	`[(node: Element \| null) => void, boolean, IntersectionObserverEntry \| undefined] & Object` Hook return value

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

useForkRef

Merges refs into a single memoized callback ref or `null`.

useScript

Custom hook that dynamically loads scripts and tracking their loading status.