{"id":28325418,"url":"https://github.com/henrikdk2/preact-intersection-observer","last_synced_at":"2025-07-09T06:07:43.846Z","repository":{"id":45460979,"uuid":"342346932","full_name":"HenrikDK2/preact-intersection-observer","owner":"HenrikDK2","description":"A lightweight Preact implementation of Intersection Observer API.","archived":false,"fork":false,"pushed_at":"2023-01-22T00:48:07.000Z","size":1005,"stargazers_count":6,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-23T12:43:32.932Z","etag":null,"topics":["hooks","intersection-observer","intersectionobserver-api","lazy-loading","performance","preact","preact-hooks"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/preact-intersection-observer","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/HenrikDK2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-25T18:52:12.000Z","updated_at":"2023-01-21T19:26:06.000Z","dependencies_parsed_at":"2023-02-12T13:15:18.521Z","dependency_job_id":null,"html_url":"https://github.com/HenrikDK2/preact-intersection-observer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HenrikDK2/preact-intersection-observer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenrikDK2%2Fpreact-intersection-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenrikDK2%2Fpreact-intersection-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenrikDK2%2Fpreact-intersection-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenrikDK2%2Fpreact-intersection-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HenrikDK2","download_url":"https://codeload.github.com/HenrikDK2/preact-intersection-observer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenrikDK2%2Fpreact-intersection-observer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264403798,"owners_count":23602621,"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":["hooks","intersection-observer","intersectionobserver-api","lazy-loading","performance","preact","preact-hooks"],"created_at":"2025-05-25T21:13:22.885Z","updated_at":"2025-07-09T06:07:43.840Z","avatar_url":"https://github.com/HenrikDK2.png","language":"TypeScript","readme":"# preact-intersection-observer\n\nA lightweight Preact implementation of the Intersection Observer API that is fast and easy to use. With a gzipped size\nof less than 0.4kb, this package provides a simple way to detect when an element is within the viewport.\n\n## Installation\n\n```bash\nnpm i preact-intersection-observer --save\n```\n\n## Usage\n\n### useObserver\n\n```jsx\nconst [ref, inView, entry] = useObserver(options);\n```\n\nThe `useObserver` hook allows you to observe an element's visibility within the viewport. It takes an optional `options`\nobject, but `ref` must reference the element that you want to observe. `inView` is a boolean that indicates whether the\nelement is within the viewport, and `entry` returns the\n[IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) object. Both\n`inView` and `entry` will update when the element enters or exits the viewport.\n\n### ViewportObserver\n\n```jsx\n  \u003cViewportObserver\n    as=\"section\"\n    options={options}\n    render={({ inView, entry }) =\u003e (...)}\n  /\u003e\n```\n\nThe `ViewportObserver` component is similar to the `useObserver` hook, but it is typically used when multiple observers\nare needed within the same component. It also takes an optional `options` object and a `render` prop that returns the\n`inView`, and `entry` values, as well as an `as` prop that allows you to specify the HTML element that will be used as\nthe wrapper, it defaults to `div`.\n\n## API\n\n### Options\n\nThe `options` object is used in both the `useObserver` hook, and the `ViewportObserver` component.\n\n| Name          | Type      | Default | Description                                                                                                                                                                                                                       |\n| ------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| rootMargin    | `string`  | `0px`   | Allows you to grow or shrink the area around the root element's bounding box, specified in the same format as the CSS margin property.                                                                                            |\n| threshold     | `number`  | `0.0`   | The target visibility percentage in view before triggering. The value can range from 0 to 1, with 0 meaning that even a single visible pixel is sufficient, 0.25 representing 25% visibility, and 1 representing 100% visibility. |\n| triggerOnce   | `boolean` | `false` | If true, the observer will trigger only once.                                                                                                                                                                                     |\n| defaultInView | `boolean` | `false` | Specifies if the element defaults to being in view or not. This can be useful if you want an element to be visible at first, but then disappear when it goes out of view.                                                         |\n\n### ViewportObserver props\n\n| Name   | Type                                     | Default     | Description                                                                                                                                                                                                                                                            |\n| ------ | ---------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| as     | `string`                                 | `div`       | This prop allows you to specify the type of HTML element that will be used to wrap the content passed to the `ViewportObserver` component. By default, it will be a div element, but you can change it to any valid HTML element, such as a section, article, or span. |\n| render | `({inView, entry}) =\u003e ComponentChildren` | `undefined` | This prop is a function that receives an object containing the `inView` boolean, and the root `entry` of the container. It expects that you return a component that will be rendered by the `ViewportObserver`.                                                        |\n\n## Examples\n\n### JavaScript example\n\n```jsx\nimport { h } from \"preact\";\nimport { useObserver, ViewportObserver } from \"preact-intersection-observer\";\n\n// useObserver hook\nexport const Example = () =\u003e {\n  const [ref, inView, entry] = useObserver();\n\n  return \u003cdiv ref={ref}\u003e...\u003c/div\u003e;\n};\n\n// ViewportObserver\nexport const Example2 = () =\u003e (\n  \u003cViewportObserver\n    render={({ inView, entry }) =\u003e (...)}\n  /\u003e\n);\n```\n\n### TypeScript example\n\n```tsx\nimport { FunctionalComponent, h } from \"preact\";\nimport { useObserver, ViewportObserver } from \"preact-intersection-observer\";\n\n// useObserver hook\nexport const Example: FunctionalComponent = () =\u003e {\n  const [ref, inView, entry] = useObserver\u003cHTMLDivElement\u003e();\n\n  return \u003cdiv ref={ref}\u003e...\u003c/div\u003e;\n};\n\n// ViewportObserver\nexport const Example2: FunctionalComponent = () =\u003e (\n  \u003cViewportObserver\n    render={({ inView, entry }) =\u003e (...)}\n  /\u003e\n);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenrikdk2%2Fpreact-intersection-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhenrikdk2%2Fpreact-intersection-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenrikdk2%2Fpreact-intersection-observer/lists"}