{"id":18711557,"url":"https://github.com/bitmap/react-hook-inview","last_synced_at":"2025-04-07T17:10:27.933Z","repository":{"id":34135808,"uuid":"170432411","full_name":"bitmap/react-hook-inview","owner":"bitmap","description":"React hook for detecting when an element is in the viewport","archived":false,"fork":false,"pushed_at":"2024-04-29T22:09:35.000Z","size":1289,"stargazers_count":86,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-01T22:43:29.395Z","etag":null,"topics":["intersection-observer","react-hook","viewport"],"latest_commit_sha":null,"homepage":"","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/bitmap.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-02-13T03:18:34.000Z","updated_at":"2024-11-11T14:00:55.000Z","dependencies_parsed_at":"2024-06-18T15:23:15.158Z","dependency_job_id":"a906fa21-4f56-4966-a5ef-11e2ff6cbac3","html_url":"https://github.com/bitmap/react-hook-inview","commit_stats":{"total_commits":103,"total_committers":5,"mean_commits":20.6,"dds":"0.12621359223300976","last_synced_commit":"95d7428f6c28c00ebf948ed619754491f3b0d2ff"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitmap%2Freact-hook-inview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitmap%2Freact-hook-inview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitmap%2Freact-hook-inview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitmap%2Freact-hook-inview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitmap","download_url":"https://codeload.github.com/bitmap/react-hook-inview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694876,"owners_count":20980733,"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-hook","viewport"],"created_at":"2024-11-07T12:39:27.177Z","updated_at":"2025-04-07T17:10:27.901Z","avatar_url":"https://github.com/bitmap.png","language":"TypeScript","readme":"# react-hook-inview\n\n[![npm version](https://img.shields.io/npm/v/react-hook-inview.svg?style=flat-square)](https://npmjs.org/package/react-hook-inview 'View this project on npm')\n\nDetect if an element is in the viewport using a [React\nHook](https://reactjs.org/docs/hooks-intro.html). Utilizes the [Intersection\nObserver API], so check for\n[compatibility](https://caniuse.com/#feat=intersectionobserver).\n\n# Install\n\n```\nnpm install react-hook-inview\n```\n\n\u003e _Optional:_ Install a\n\u003e [polyfill](https://www.npmjs.com/package/intersection-observer) for browsers\n\u003e that don't support `IntersectionObserver` yet (i.e. Safari 12).\n\n# `useInView`\n\nThe hook in its most basic form returns a ref and a boolean.\n\n```js\nconst [ref, inView] = useInView()\n```\n\nThat's all you need to get started, but it does [a lot more](#api).\n\n## Example\n\nIn this example, the boolean is used to toggle some text on and off when the\nelement is fully in the viewport.\n\n```js\nimport React from 'react'\nimport { useInView } from 'react-hook-inview'\n\nconst Component = () =\u003e {\n  const [ref, isVisible] = useInView({\n    threshold: 1,\n  })\n\n  return \u003cdiv ref={ref}\u003e{isVisible ? 'Hello World!' : ''}\u003c/div\u003e\n}\n```\n\n## API\n\nThe hook returns a tuple with four items:\n\n- A `ref` callback, used to set observer on an element.\n- A `boolean` when the element is in the viewport.\n- The `IntersectionObserverEntry`\n- The `IntersectionObserver` itself\n\n```js\nconst [ref, inView, entry, observer] = useInView(options, [...state])\n```\n\n## Options\n\nThese are the default options.\n\n```ts\n{\n  root?: RefObject\u003cElement\u003e | null, // Optional, must be a parent of your ref\n  rootMargin?: string,              // '0px' or '0px 0px 0px 0px', also accepts '%' unit\n  threshold?: number | number[],    // 0.5 or [0, 0.5, 1]\n  unobserveOnEnter?: boolean,       // Set 'true' to run only once\n  onEnter?: (entry?, observer?) =\u003e void, // See below\n  onLeave?: (entry?, observer?) =\u003e void, // See below\n  target?: RefObject\u003cElement\u003e | null,    // *DEPRECATED* Supply your own ref object\n  defaultInView?: boolean, // false\n}\n```\n\n**NOTE** If you're updating from \u003c version `4.0.0.`, you might have noticed an\nAPI changed. The `target` option has been deprecated, but still works the same\nway.\n\n## `onEnter` \u0026 `onLeave` callbacks\n\n:warning: These options are deprecated, and support may be removed in a future\nrelease. To access the intersection observer callback, use the\n[useInViewEffect](#useInViewEffect) hook instead.\n\n`onEnter` and `onLeave` recieve a callback function that returns an\n`IntersectionObserverEntry` and the `IntersectionObserver` itself. The two\narguments are entirely optional.\n\n```js\nfunction onEnter(entry, observer) {\n  // entry.boundingClientRect\n  // entry.intersectionRatio\n  // entry.intersectionRect\n  // entry.isIntersecting\n  // entry.rootBounds\n  // entry.target\n  // entry.time\n}\n```\n\n**NOTE**: If you supply an array with multiple values to `threshold`, `onEnter`\nwill be called each time the element intersects with the top _and_ bottom of\nthe viewport. `onLeave` will on trigger once the element has left the viewport\nat the first threshold specified.\n\n### Accessing external state in callbacks\n\nFor performance reasons, the hook is only triggered once on mount. However,\nthis means you can't access updated state in the `onEnter/onLeave` callbacks.\nAn optional second argument will retrigger the hook to mitigate this.\n\n```js\n// Some other state\nconst [state, setState] = useState(false)\n\nconst [ref, inView] = useInView(\n  {\n    onEnter: () =\u003e console.log(state),\n  },\n  [state], // \u003c- Will update callback\n)\n```\n\nThis will remount the intersection observer, and may have unintended side\neffects. Use this feature with caution.\n\n# `useInViewEffect`\n\nAn alternate hook that allows you to just supply the intersection observer\ncallback. This approach is gives you a little more flexibilty than using the\ncallbacks in the original hook as it doesn't obfuscate the [Intersection\nObserver API] as much.\n\n```js\nconst ref = useInViewEffect(callback, options, [...state])\n```\n\n## Example\n\n```js\nimport React, { useState } from 'react'\nimport { useInViewEffect } from 'react-hook-inview'\n\nconst Component = () =\u003e {\n  const [isVisible, setIsVisible] = useState(false)\n\n  const ref = useInViewEffect(\n    ([entry], observer) =\u003e {\n      if (entry.isIntersecting) {\n        observer.unobserve(entry.target)\n      }\n      setIsVisible(entry.isIntersecting)\n    },\n    { threshold: 0.5 },\n  )\n\n  return \u003cdiv ref={ref}\u003e{isVisible ? 'Hello World!' : ''}\u003c/div\u003e\n}\n```\n\nKeep in mind that the first argument will return an array.\n\n## Options\n\nThe `useInViewEffect` hook has more limited options that mirror the default\nAPI.\n\n```js\n{\n  root?: RefObject\u003cElement\u003e | null, // Optional, must be a parent of your ref\n  rootMargin?: string,              // '0px' or '0px 0px 0px 0px', also accepts '%' unit\n  threshold?: number | number[],    // 0.5 or [0, 0.5, 1]\n}\n```\n\n# License\n\n[MIT](https://github.com/bitmap/react-hook-inview/blob/master/LICENSE)\n\n[intersection observer api]: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitmap%2Freact-hook-inview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitmap%2Freact-hook-inview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitmap%2Freact-hook-inview/lists"}