{"id":18913379,"url":"https://github.com/xg4/in-viewport","last_synced_at":"2026-03-09T09:30:20.067Z","repository":{"id":35211803,"uuid":"216768602","full_name":"xg4/in-viewport","owner":"xg4","description":"Get callback when a DOM element enters or leaves the viewport.","archived":false,"fork":false,"pushed_at":"2023-01-04T23:13:57.000Z","size":595,"stargazers_count":2,"open_issues_count":22,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-01T03:34:53.131Z","etag":null,"topics":["dom","element","in-viewport","intersection","intersection-observer","observer","viewport"],"latest_commit_sha":null,"homepage":"https://xg4.github.io/in-viewport/","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/xg4.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":"2019-10-22T08:59:01.000Z","updated_at":"2023-03-07T16:48:37.000Z","dependencies_parsed_at":"2023-01-15T16:31:10.729Z","dependency_job_id":null,"html_url":"https://github.com/xg4/in-viewport","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xg4%2Fin-viewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xg4%2Fin-viewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xg4%2Fin-viewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xg4%2Fin-viewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xg4","download_url":"https://codeload.github.com/xg4/in-viewport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239907234,"owners_count":19716583,"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":["dom","element","in-viewport","intersection","intersection-observer","observer","viewport"],"created_at":"2024-11-08T10:06:58.145Z","updated_at":"2026-03-09T09:30:19.942Z","avatar_url":"https://github.com/xg4.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# In Viewport\n\n[![Build Status](https://www.travis-ci.com/xg4/in-viewport.svg?branch=master)](https://www.travis-ci.com/xg4/in-viewport)\n[![npm](https://img.shields.io/npm/v/@xg4/in-viewport.svg)](https://www.npmjs.com/package/@xg4/in-viewport)\n[![GitHub](https://img.shields.io/github/license/xg4/in-viewport.svg)](https://github.com/xg4/in-viewport/blob/master/LICENSE)\n\n\u003e Get callback when a DOM element enters or leaves the viewport.\n\n## Installation\n\n### Install with npm or Yarn\n\n```bash\n# npm\n$ npm install @xg4/in-viewport --save\n```\n\n```bash\n# yarn\n$ yarn add @xg4/in-viewport\n```\n\n## Usage\n\n```js\nimport InViewport from '@xg4/in-viewport'\n\nconst iv = new InViewport()\n// or\nconst options = {} // IntersectionObserverInit options\nconst iv = new InViewport(options)\n\n// entry: IntersectionObserverEntry\n// observer: IntersectionObserver\nfunction onEnter(entry, observer) {\n  console.log('el enter the viewport')\n}\n\nfunction onLeave(entry, observer) {\n  console.log('el leave the viewport')\n}\n\n// on\niv.on(el, onEnter)\niv.on(el, onEnter, onLeave)\niv.on(el, {\n  onEnter,\n  onLeave\n})\n\n// off\niv.off(el)\n\n// once\niv.once(el, onEnter)\niv.once(el, onEnter, onLeave)\niv.once(el, {\n  onEnter,\n  onLeave,\n  once: true\n})\n\n// also use it, like this\niv.on(el)\n  .on(el2)\n  .once(el3)\n  .off(el4)\n```\n\n## Example\n\n\u003e [https://xg4.github.io/in-viewport/](https://xg4.github.io/in-viewport/)\n\n## Contributing\n\nWelcome\n\n- Fork it\n\n- Submit pull request\n\n## Browsers support\n\nModern browsers and IE10.\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE10, Edge                                                                                                                                                                                                      | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                           |\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxg4%2Fin-viewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxg4%2Fin-viewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxg4%2Fin-viewport/lists"}