aq-uiIntersectionObserverResult
interfaceSource L15Type contract for IntersectionObserverResult.
interface IntersectionObserverResultMembers
| Name | Type |
|---|---|
entry | IntersectionObserverEntry | null |
isIntersecting | boolean |
supported | boolean |
Use Intersection Observer
Open-code aq-ui React hook for Use Intersection Observer.
Installation
pnpm dlx aq-ui@alpha add use-intersection-observerAPI reference
Client moduleImport the parts you need, then jump to an export for its contract.
Quick start
"use client"
import { useIntersectionObserver } from "@/hooks/use-intersection-observer"useIntersectionObserver
functionSource L21Open-code aq-ui React hook for Use Intersection Observer.
function useIntersectionObserver<T extends Element>(target: Target<T>, { root, rootMargin, threshold, enabled = true, freezeOnceVisible = false, onChange, }: UseIntersectionObserverOptions = {}): IntersectionObserverResult- Returns
IntersectionObserverResult
Parameters
| Name | Type | Default |
|---|---|---|
target | Target<T> | — |
options? | UseIntersectionObserverOptions | {} |
UseIntersectionObserverOptions
interfaceSource L9Type contract for UseIntersectionObserverOptions.
interface UseIntersectionObserverOptions extends IntersectionObserverInitMembers
| Name | Type | Default |
|---|---|---|
enabled? | boolean | true |
freezeOnceVisible? | boolean | false |
onChange? | (entry: IntersectionObserverEntry) => void | — |
Registry dependencies
hook-observer-pools, hook-target, use-stable-callback
Files
- hooks/use-intersection-observer.ts