{"id":19943145,"url":"https://github.com/cats-oss/use-intersection","last_synced_at":"2025-04-12T16:37:01.196Z","repository":{"id":34307791,"uuid":"177139045","full_name":"cats-oss/use-intersection","owner":"cats-oss","description":"React Hooks for IntersectionObserver.","archived":false,"fork":false,"pushed_at":"2025-03-22T18:11:18.000Z","size":1529,"stargazers_count":108,"open_issues_count":63,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T13:04:16.734Z","etag":null,"topics":["intersection-observer","react","react-hooks","reactjs"],"latest_commit_sha":null,"homepage":"https://cats-oss.github.io/use-intersection/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cats-oss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-22T12:48:43.000Z","updated_at":"2024-12-30T15:53:45.000Z","dependencies_parsed_at":"2023-01-15T06:15:56.997Z","dependency_job_id":"b2f41a8b-2c87-4263-8053-211f442e1be0","html_url":"https://github.com/cats-oss/use-intersection","commit_stats":{"total_commits":58,"total_committers":5,"mean_commits":11.6,"dds":0.5862068965517242,"last_synced_commit":"bb30506be7c445e0208817f8c5e18d1f82c4d76f"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cats-oss%2Fuse-intersection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cats-oss%2Fuse-intersection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cats-oss%2Fuse-intersection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cats-oss%2Fuse-intersection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cats-oss","download_url":"https://codeload.github.com/cats-oss/use-intersection/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248597501,"owners_count":21130889,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["intersection-observer","react","react-hooks","reactjs"],"created_at":"2024-11-13T00:15:30.621Z","updated_at":"2025-04-12T16:37:01.163Z","avatar_url":"https://github.com/cats-oss.png","language":"TypeScript","readme":"# use-intersection\n\n[![npm](https://img.shields.io/npm/v/use-intersection.svg?style=flat-square)](https://www.npmjs.com/package/use-intersection)\n[![CircleCI](https://img.shields.io/circleci/project/github/cats-oss/use-intersection/master.svg?style=flat-square)](https://circleci.com/gh/cats-oss/use-intersection)\n\n\u003e [React Hooks](https://reactjs.org/docs/hooks-intro.html) for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).\n\n:dog: See [Storybook](https://cats-oss.github.io/use-intersection/).\n\n## Installation\n\n```bash\n$ yarn add use-intersection\n```\n\n## Usage\n\n### Basic\n\nThis is the simplest example.\n\n```typescript\nimport React, { useRef } from 'react';\nimport { useIntersection } from 'use-intersection';\n\nconst Component: React.FC = () =\u003e {\n  const target = useRef\u003cHTMLDivElement\u003e(null);\n  const intersecting = useIntersection(target);\n\n  return \u003cdiv ref={target}\u003e{intersecting ? 'visible' : 'invisible'}\u003c/div\u003e;\n};\n```\n\n### Custom Root Element\n\nThis is an example of using scrollable elements other than Viewport.\n\n```typescript\nimport React, { useRef } from 'react';\nimport { useIntersection } from 'use-intersection';\n\nconst Component: React.FC = () =\u003e {\n  const root = useRef\u003cHTMLDivElement\u003e(null);\n  const target = useRef\u003cHTMLDivElement\u003e(null);\n  const intersecting = useIntersection(target, {\n    root,\n    rootMargin: '100px',\n  });\n\n  return (\n    \u003cdiv style={{ overflow: 'hidden auto', height: 300 }}\u003e\n      {/* ... */}\n      \u003cdiv ref={target}\u003e{intersecting ? 'visible' : 'invisible'}\u003c/div\u003e\n      {/* ... */}\n    \u003c/div\u003e\n  );\n};\n```\n\n### Lazy Image\n\nThis is an example of an Image component that delays loading.\n\n```typescript\nimport React, { useRef } from 'react';\nimport { useIntersection } from 'use-intersection';\n\nconst LazyImage: React.FC\u003cReact.ComponentProps\u003c'img'\u003e\u003e = (props) =\u003e {\n  const target = useRef\u003cHTMLSpanElement\u003e(null);\n  const intersected = useIntersection(target, {\n    rootMargin: '250px',\n    once: true,\n  });\n\n  return \u003cspan ref={target}\u003e{intersected \u0026\u0026 \u003cimg {...props} /\u003e}\u003c/span\u003e;\n};\n```\n\n## Browser support\n\nSupports modern web browser.\n\nIf your browser does not support `IntersectionObserver`, we recommend using Polyfill.\n\n### npm package\n\n```bash\n$ yarn add intersection-observer\n```\n\n\u003e https://www.npmjs.com/package/intersection-observer\n\n### CDN\n\n```html\n\u003cscript src=\"https://polyfill-fastly.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver\"\u003e\u003c/script\u003e\n```\n\n\u003e https://polyfill-fastly.io/v3/\n\n## API\n\nThe following resources will help you.\n\n- [React Hooks](https://reactjs.org/docs/hooks-intro.html)\n- [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)\n\n---\n\n### `useIntersection`\n\n`useIntersection` returns a flag whether the target intersects.\n\n```typescript\nconst useIntersection = (\n  target: React.RefObject\u003cElement\u003e | Element | null,\n  options: IntersectionOptions = {},\n  callback?: IntersectionChangeHandler,\n) =\u003e boolean;\n```\n\n### `options: IntersectionOptions`\n\n```typescript\ntype IntersectionOptions = {\n  root?: React.RefObject\u003cElement\u003e;\n  rootMargin?: string;\n  threshold?: number | number[];\n  once?: boolean;\n  defaultIntersecting?: boolean;\n};\n```\n\n### `callback: IntersectionChangeHandler`\n\n```typescript\ntype IntersectionChangeHandler = (entry: IntersectionObserverEntry) =\u003e void;\n```\n\n## CHANGELOG\n\nSee [CHANGELOG.md](./CHANGELOG.md).\n\n## Contributing\n\nWe are always welcoming your contribution :clap:\n\n1. Fork (https://github.com/cats-oss/use-intersection) :tada:\n1. Create a feature branch :coffee:\n1. Run test suite with the `$ yarn test` command and confirm that it passes :zap:\n1. Commit your changes :memo:\n1. Rebase your local changes against the `master` branch :bulb:\n1. Create new Pull Request :love_letter:\n\nBugs, feature requests and comments are more than welcome in the [issues](https://github.com/cats-oss/use-intersection/issues).\n\n### Development scripts\n\n#### `yarn storybook`\n\nRun Storybook.\n\n```bash\n$ yarn storybook\n```\n\n#### `yarn test`\n\nRun Unit test with Jest.\n\n```bash\n$ yarn test\n```\n\n#### `yarn lint`\n\nRun lint with ESLint.\n\n```bash\n$ yarn lint\n```\n\n#### `yarn format`\n\nRun formatting with ESLint (`--fix`) and Prettier.\n\n```bash\n$ yarn format\n```\n\n## License\n\n[MIT © Cyberagent, Inc](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcats-oss%2Fuse-intersection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcats-oss%2Fuse-intersection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcats-oss%2Fuse-intersection/lists"}