Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA single true or false for whether an element is on screen, with an amount to show, a margin and a once option for reveal-on-scroll.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it to play an entrance animation, start a counter, mark a table-of-contents entry or lazy-mount something heavy as soon as an element scrolls into view.
Do not use it when you need the ratio or the entry (use useIntersectionObserver), and do not hide content from assistive technology until it is in view.
import { useInView } from "@/hooks/use-in-view"const { ref, inView } = useInView({ once: true, amount: 0.3 })
<section ref={ref} data-visible={inView}>...</section>useInView(options?): { ref, inView }
| Option | Type | Default | Description |
|---|---|---|---|
once | boolean | false | Stay true after the first time (and stop observing). |
amount | number | 0 | Share of the element, 0 to 1, that must be visible. |
margin | string | "0px" | Root margin, such as "-80px" to trigger later. |
initial | boolean | false | The value before the observer reports, and when unsupported. |
Without IntersectionObserver the hook returns initial. Set initial: true when content should be shown in that case.
A hook has no markup. Entrance animations driven by it must honour prefers-reduced-motion: switch to a plain fade or show the final state at once.
The hook ships with renderHook tests (use-in-view.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.