wellyshen/react-cool-inview
Some data may be outdated — see provenance labels.
😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element). observed · 2026-10-03
Health v2 · maintenance only
23/100
- Activity 0
- Release rhythm 8
- Longevity 100
How is this computed?
round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10) — computed 2026-10-22. Adoption (stars, forks) is never an input.
- gap_med: n/a
- age_days: 2393
- days_rel: n/a
- days_push: 1166
- n_releases_24m: 0
Adoption not part of the score
1450 stars · 39 forks observed · 2026-10-03
What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded
A lightweight React hook and component that monitors when elements enter or leave the viewport using the Intersection Observer API. It supports use cases like lazy-loading images and videos, infinite scroll, triggering animations, tracking impressions, and detecting scroll direction.
Use cases
- lazy load images when they scroll into view
- implement infinite scroll in react
- trigger animations when element enters viewport
- track ad impressions in react app
- detect scroll direction in react
- monitor element visibility with intersection observer
When to choose
- you need performant viewport visibility detection in a React app without blocking the main thread
- you want a flexible hook-based API for lazy-loading, infinite scroll, or impression tracking
- you need scroll direction detection alongside visibility monitoring
When to avoid
- you are not using React and need a vanilla Intersection Observer wrapper
- you need scroll position or parallax effects rather than enter/leave visibility events
- you require active maintenance and frequent updates, as the latest release was in 2023
Facets
library · maturity maintenance
ui-components animation image-processing frontend web-development performance browser cross-platform react-hook intersection-observer viewport-detection lazy-loading infinite-scroll scroll-tracking typescript nodejs
2 sources
- readme: https://github.com/wellyshen/react-cool-inview · fetched 2026-10-03 · 8918ff00e40a
- homepage: https://react-cool-inview.netlify.app · fetched 2026-08-29 · 147d133e6c27
Member repositories
| Repository | Role | Health v2 |
|---|---|---|
| wellyshen/react-cool-inview | main | 23 |
For agents
markdown · JSON · MCP: product_card(name="wellyshen/react-cool-inview")
Data as of 2026-10-19T08:05:51.212177+00:00 · Report a problem