{"_id":"@ashutosh./use-intersection-observer","name":"@ashutosh./use-intersection-observer","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ashutosh./use-intersection-observer","version":"1.0.0","keywords":["react","intersection-observer","hook"],"author":{"name":"Ashutosh"},"license":"MIT","description":"A React hook for Intersection Observer","devDependencies":{"@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","@babel/preset-typescript":"^7.27.0","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.2.0","@types/react":"^19.0.12","@vitejs/plugin-react":"^4.3.4","react":"^19.0.0","typescript":"^5.8.2","vitest":"^3.0.9"},"repository":{"type":"git","url":"git+https://github.com/Ashutosh-code-arch/use-intersection-observer.git"},"main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"dev":"vite","build":"vite build"},"peerDependencies":{"react":"^18.0.0"},"publishConfig":{"access":"public"},"_id":"@ashutosh./use-intersection-observer@1.0.0","gitHead":"6e80a8052ffbe7b67e99e2dae5af9369c69646f6","bugs":{"url":"https://github.com/Ashutosh-code-arch/use-intersection-observer/issues"},"homepage":"https://github.com/Ashutosh-code-arch/use-intersection-observer#readme","_nodeVersion":"23.5.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-CIoUqMmLT9chnl0mPFPSVvHC6U7rdPtnd3M/aK1oMWRdTf9k+VLvBff7zgJOp2JgF4SjvgKt4n3APvqRSreiWg==","shasum":"8f8a28cc43e69504494c2c30c11329bc7bf02680","tarball":"https://registry.npmjs.org/@ashutosh./use-intersection-observer/-/use-intersection-observer-1.0.0.tgz","fileCount":3,"unpackedSize":4963,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCTTMxXLHaY2nQsTQr67dSJO+ozUoZtT2+NOdxzp/gkvQIgBHOQWC7Lh+GqAbpotflcUX8Npl6Fgg6z43JsvGsgN/Q="}]},"_npmUser":{"name":"ashutosh.","email":"ashutosh.k0umar@gmail.com"},"directories":{},"maintainers":[{"name":"ashutosh.","email":"ashutosh.k0umar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/use-intersection-observer_1.0.0_1743023869241_0.9643397509303657"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-26T21:17:49.173Z","1.0.0":"2025-03-26T21:17:49.463Z","modified":"2025-03-26T21:17:49.677Z"},"maintainers":[{"name":"ashutosh.","email":"ashutosh.k0umar@gmail.com"}],"description":"A React hook for Intersection Observer","homepage":"https://github.com/Ashutosh-code-arch/use-intersection-observer#readme","keywords":["react","intersection-observer","hook"],"repository":{"type":"git","url":"git+https://github.com/Ashutosh-code-arch/use-intersection-observer.git"},"author":{"name":"Ashutosh"},"bugs":{"url":"https://github.com/Ashutosh-code-arch/use-intersection-observer/issues"},"license":"MIT","readme":"# useIntersectionObserver\n\nA lightweight and flexible React hook to observe element visibility using the Intersection Observer API.\n\n## Installation\n\n```sh\nnpm install use-intersection-observer\n```\n\nor\n\n```sh\nyarn add use-intersection-observer\n```\n\n## Usage\n\n```tsx\nimport { useIntersectionObserver } from \"use-intersection-observer\";\n\nexport default function ExampleComponent() {\n    const { elementRef, isIntersecting } = useIntersectionObserver();\n\n    return (\n        <div>\n            <div style={{ height: \"100vh\" }}>Scroll down</div>\n            <div\n                ref={elementRef}\n                style={{\n                    height: 100,\n                    background: isIntersecting ? \"green\" : \"red\",\n                }}\n            >\n                {isIntersecting ? \"Visible\" : \"Not Visible\"}\n            </div>\n        </div>\n    );\n}\n```\n\n## API\n\n### `useIntersectionObserver(callback?, options?)`\n\n| Parameter  | Type                                         | Default                                                                       | Description                                          |\n| ---------- | -------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------- |\n| `callback` | `(entry: IntersectionObserverEntry) => void` | `undefined`                                                                   | Callback function triggered when visibility changes. |\n| `options`  | `IntersectionOptions`                        | `{ threshold: 0.1, root: null, rootMargin: '0px', freezeOnceVisible: false }` | Options for customizing the observer behavior.       |\n\n### `options` properties\n\n| Option              | Type                   | Default | Description                                             |\n| ------------------- | ---------------------- | ------- | ------------------------------------------------------- |\n| `threshold`         | `number` or `number[]` | `0.1`   | Intersection threshold for triggering observer.         |\n| `root`              | `Element` or `null`    | `null`  | Root element for intersection calculation.              |\n| `rootMargin`        | `string`               | `'0px'` | Margin around the root element.                         |\n| `freezeOnceVisible` | `boolean`              | `false` | If `true`, stops observing once the element is visible. |\n\n## Example with Callback\n\n```tsx\nconst callback = (entry) => {\n    console.log(\"Element is visible:\", entry.isIntersecting);\n};\n\nconst { elementRef, isIntersecting } = useIntersectionObserver(callback, {\n    threshold: 0.5,\n});\n```\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n","readmeFilename":"README.md","_rev":"1-311e0cf610fe355ef7fb3dc5cd45f215"}