feat: implement the useOnInView hook

[thebuilder]

Based on the great work in #718 by @jantimon - This is an attempt to implement just the useOnInView hook, while maintaining the fallback functionality, and legacy React version support.

✨ New

• useOnInView hook — a no-re-render alternative to useInView that delivers (inView, entry) to your callback while returning a ref you can attach to any element. Designed for tracking, analytics, and other side effect heavy workloads where state updates are unnecessary.
• IntersectionChangeEffect / IntersectionEffectOptions types — exported helper types that describe the new hook’s callback and options surface.
• Storybook playground + documentation — new story, README section, and JSDoc example demonstrating how to use useOnInView.

✨ Improvements

• useInView, useOnInView, and <InView> now ignore the browser’s initial inView === false emission so handlers only fire once a real visibility change occurs, while still reporting all subsequent enter/leave transitions (including threshold arrays).
• Observer cleanup logic across the hooks/components was tightened to ensure skip toggles and fallback scenarios re-attach correctly without losing previous state.

🧪 Testing

• Added a dedicated Vitest suite for useOnInView, covering thresholds, triggerOnce, skip toggling, merged refs, and multiple observers on the same node.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
react-intersection-observer	Ready	Preview	Comment	Oct 28, 2025 2:29pm

[pkg-pr-new]

npm i https://pkg.pr.new/thebuilder/react-intersection-observer@738

commit: 8cd8e42

[Copilot]

Pull Request Overview

This PR implements the useOnInView hook, a new alternative to useInView that provides a callback-based API for monitoring element visibility without triggering re-renders. This is useful for performance-critical use cases like tracking and logging.

Key changes:

• Added useOnInView hook with callback-based API and optional cleanup function
• Introduced trigger option to specify whether callbacks fire on enter or leave
• Comprehensive test coverage for various scenarios including threshold tracking, cleanup behavior, and observer destruction

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/useOnInView.tsx	Core implementation of the new hook with ref callback pattern and observer lifecycle management
src/index.tsx	Exported new hook and added related TypeScript types for the API
src/__tests__/useOnInView.test.tsx	Complete test suite covering callback execution, cleanup, thresholds, and edge cases
storybook/stories/useOnInView.story.tsx	Interactive Storybook examples demonstrating the hook's features
README.md	Documentation for the new hook with usage examples and options table

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.