# thebuilder/react-intersection-observer

React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

Repository: https://github.com/thebuilder/react-intersection-observer
Canonical: https://ross.abutalabs.com/products/react-intersection-observer
Homepage: https://roi.thebuilder.dk
Language: TypeScript
License: MIT
License Family: permissive
Topics: intersectionobserver-api, react, performance, scrolling, intersectionobserver, monitor, visibility, viewport, lazy-loading, hooks, hook, intersection-observer, react-hooks, reactjs
Last push: 2026-08-26T12:28:18+00:00

## Health v2 (maintenance only)
Score: 95/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 99, release rhythm 87, longevity 100
- inputs: {"age_days": 3410, "days_push": 7, "days_rel": 7, "gap_med": 33, "n_releases_24m": 12}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 5538, forks 188 (observed 2026-08-28T04:09:22.086397+00:00)

## What it is
A tiny (~1 kB gzipped) TypeScript React library wrapping the browser Intersection Observer API. It exposes hooks (useInView, useOnInView) and an <InView> component to detect when elements enter or leave the viewport.

## Use cases
- lazy load images when they scroll into view
- trigger scroll reveal animations in react
- track ad impressions when visible
- build infinite scroll lists
- highlight the active section in a scrollspy nav
- prefetch data when a component approaches the viewport

## When to choose
- you use React 17+ and need viewport visibility detection with a tiny bundle
- you want typed APIs matching native IntersectionObserverInit options
- you observe many elements and need shared observers for performance
- you need deterministic Jest/Vitest tests with an Intersection Observer mock

## When to avoid
- you are not using React
- you need scroll position or parallax effects rather than simple visibility
- you target very old browsers without Intersection Observer support and cannot polyfill

## Facets
- artifact type: library
- maturity: stable
- function: ui-components, state-management, developer-tools
- domain: frontend, web-development, performance
- platform: browser
- tags: react-hooks, intersection-observer, viewport-detection, lazy-loading, scroll-animations, impression-tracking, infinite-scroll, typescript, nodejs, web-server

## Member repositories
- thebuilder/react-intersection-observer (main) score 95

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:09:22.086397+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:55:43.158154+00:00, confidence not recorded.
  - readme: https://github.com/thebuilder/react-intersection-observer (fetched 2026-08-28T04:09:22.086397+00:00, sha abcceb246a57)
  - homepage: https://roi.thebuilder.dk (fetched 2026-08-29T08:51:20.268139+00:00, sha 98da7a34ee9d)
  - site_page: https://react-intersection-observer.thebuilder.dk/overview (fetched 2026-08-29T08:51:20.270722+00:00, sha c02f877db59e)
  - site_page: https://react-intersection-observer.thebuilder.dk/changelog (fetched 2026-08-29T08:51:20.272614+00:00, sha 449972b0bb70)
- Data as of 2026-08-30T08:39:29.467469+00:00.