![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n A powerful React hook for observing element visibility using the Intersection Observer API\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-intersection-observer.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/use-intersection-observer.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/use-intersection-observer?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/use-intersection-observer.svg?style=flat-square&color=007acc\")
\n \n
\n Installation ā¢\n Quick Start ā¢\n API Reference ā¢\n Examples ā¢\n License\n
\n\n\n \n š View Storybook Demo\n \n
\n\n---\n\n## Overview\n\n`@usefy/use-intersection-observer` is a feature-rich React hook for efficiently detecting element visibility in the viewport using the Intersection Observer API. It provides a simple API for lazy loading, infinite scroll, scroll animations, and more.\n\n**Part of the [@usefy](https://www.npmjs.com/org/usefy) ecosystem** ā a collection of production-ready React hooks designed for modern applications.\n\n### Why use-intersection-observer?\n\n- **Zero Dependencies** ā Pure React implementation with no external dependencies\n- **TypeScript First** ā Full type safety with comprehensive type definitions\n- **Efficient Detection** ā Leverages native Intersection Observer API for optimal performance\n- **Threshold-based Callbacks** ā Fine-grained visibility ratio tracking with multiple thresholds\n- **TriggerOnce Support** ā Perfect for lazy loading patterns\n- **Dynamic Enable/Disable** ā Conditional observation support\n- **Custom Root Containers** ā Observe elements within custom scroll containers\n- **Root Margin Support** ā Expand or shrink detection boundaries\n- **SSR Compatible** ā Works seamlessly with Next.js, Remix, and other SSR frameworks\n- **Optimized Re-renders** ā Only updates when meaningful values change\n- **Well Tested** ā Comprehensive test coverage with Vitest\n\n---\n\n## Installation\n\n```bash\n# npm\nnpm install @usefy/use-intersection-observer\n\n# yarn\nyarn add @usefy/use-intersection-observer\n\n# pnpm\npnpm add @usefy/use-intersection-observer\n```\n\n### Peer Dependencies\n\nThis package requires React 18 or 19:\n\n```json\n{\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\"\n }\n}\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport { useIntersectionObserver } from \"@usefy/use-intersection-observer\";\n\nfunction MyComponent() {\n const { ref, inView, entry } = useIntersectionObserver();\n\n return\n Built with care by the usefy team\n
\n","readmeFilename":"README.md"}