{"id":26932576,"url":"https://github.com/opuu/inview","last_synced_at":"2025-04-02T08:27:14.757Z","repository":{"id":48966133,"uuid":"361508501","full_name":"opuu/InView","owner":"opuu","description":"Check if an element is visible in the viewport.","archived":false,"fork":false,"pushed_at":"2025-02-15T23:07:16.000Z","size":91,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T17:32:38.039Z","etag":null,"topics":["animate-on-scroll","aos","events","inview","inviewport","javascript","lazyloading","visible"],"latest_commit_sha":null,"homepage":"https://opuu.github.io/InView/demo/","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/opuu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-04-25T18:34:41.000Z","updated_at":"2024-06-10T18:50:44.000Z","dependencies_parsed_at":"2023-09-24T17:00:42.131Z","dependency_job_id":null,"html_url":"https://github.com/opuu/InView","commit_stats":{"total_commits":20,"total_committers":4,"mean_commits":5.0,"dds":"0.44999999999999996","last_synced_commit":"826cdd1b815fecbfc1f3cacc53bddfcaff6b4885"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opuu%2FInView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opuu%2FInView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opuu%2FInView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opuu%2FInView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opuu","download_url":"https://codeload.github.com/opuu/InView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246780375,"owners_count":20832586,"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":["animate-on-scroll","aos","events","inview","inviewport","javascript","lazyloading","visible"],"created_at":"2025-04-02T08:27:14.244Z","updated_at":"2025-04-02T08:27:14.740Z","avatar_url":"https://github.com/opuu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# InView: Is it in viewport?\n\n[![](https://data.jsdelivr.com/v1/package/npm/@opuu/inview/badge)](https://www.jsdelivr.com/package/npm/@opuu/inview)\n\nA library to checks if an element is visible in the viewport.\n\nLazyload any content, animate elements on scroll, infinite scrolling and many more things can be done with this simple, tiny library.\n\n## Getting Started\n\nUsing InView is easy.\n\n### Install\n\nInstall it from npm, pnpm or yarn\n\n```bash\nnpm install @opuu/inview\n```\n```bash\npnpm install @opuu/inview\n```\n```bash\nyarn add @opuu/inview\n```\n\n\n### Import\n\nFor module bundlers like webpack, rollup, parcel, etc.\n\n```js\nimport InView from \"@opuu/inview\";\n```\n\nFor browsers that support ES modules, you can use the script tag with `type=\"module\"`.\n\n```html\n\u003cscript type=\"module\"\u003e\n  import InView from \"node_modules/@opuu/inview/dist/inview.js\";\n\u003c/script\u003e\n```\n\nOr you can directly import it from CDN.\n\n```html\n\u003cscript\u003e\n  import InView from \"https://cdn.jsdelivr.net/npm/@opuu/inview/dist/inview.js\";\n\u003c/script\u003e\n  ```\n\n### Usage\n\nYou can use InView in two ways.\n\nDirectly selecting the elements\n\n```js\nconst elements = new InView(\".css-selector\");\n\nelements.on(\"enter\", (event) =\u003e {\n  console.log(event);\n  // do something on enter\n});\n\nelements.on(\"exit\", (event) =\u003e {\n  console.log(event);\n  // do something on exit\n});\n```\n\nor configuring it for more control.\n\n```js\nconst element = new InView({\n    selector: \".css-selector\",\n    delay: 100,\n    precision: \"high\",\n    single: true,\n});\n\nelement.on(\"enter\", (event) =\u003e {\n  console.log(event);\n  // do something on enter\n});\n\nelement.on(\"exit\", (event) =\u003e {\n  console.log(event);\n  // do something on exit\n});\n```\n\nFor TypeScript users, you can import the types and use it like this.\n\n```ts\nimport InView, { InViewConfig, InViewEvent } from \"@opuu/inview\"\n\nconst config: InViewConfig = {\n  selector: \".css-selector\",\n  delay: 0,\n  precision: \"medium\",\n  single: true,\n};\n\nconst element: InView = new InView(config);\n\nelement.on(\"enter\", (event: InViewEvent) =\u003e {\n  console.log(event);\n  // do something on enter\n});\n\nelement.on(\"exit\", (event: InViewEvent) =\u003e {\n  console.log(event);\n  // do something on exit\n});\n```\n\n\n### Methods\n\n#### constructor(config: InViewConfig | string): InView\n\nCreate a new instance of InView.\n\n```js\nconst elements = new InView(\".css-selector\");\n```\n\nor\n\n```js\nconst element = new InView({\n    selector: \".css-selector\",\n    delay: 100,\n    precision: \"high\",\n    single: true,\n});\n```\n\nThe config object is an instance of `InViewConfig` interface. Here are the properties of the config object and their default values.\n\n| Property  | Type                        | Required | Default  | Description                                                    |\n| :-------- | :-------------------------- | :------- | :------- | :------------------------------------------------------------- |\n| selector  | string                      | true     |          | CSS selector for the elements to observe.                      |\n| delay     | number                      | false    | 0        | Delay in milliseconds for callback.                            |\n| precision | \"low\" \\| \"medium\" \\| \"high\" | false    | \"medium\" | Precision of the intersection observer.                        |\n| single    | boolean                     | false    | false    | Whether to observe only the first element or all the elements. |\n\nHere is the interface for the config object.\n\n```ts\ninterface InViewConfig {\n  selector: string;\n  delay?: number;\n  precision?: \"low\" | \"medium\" | \"high\";\n  single?: boolean;\n}\n```\n\n#### on(event: \"enter\" | \"exit\", callback: CallableFunction): InView\n\nAdd event listener for enter and exit events.\n\n```js\nelements.on(\"enter\", (event) =\u003e {\n  console.log(event);\n  // do something on enter\n});\n\nelements.on(\"exit\", (event) =\u003e {\n  console.log(event);\n  // do something on exit\n});\n```\n\nThe event object is an instance of `InViewEvent` interface. Here are the properties of the event object.\n\n| Property           | Type                    | Description                                                                              |\n| :----------------- | :---------------------- | :--------------------------------------------------------------------------------------- |\n| percentage         | number                  | Percentage of the element visible in the viewport.                                       |\n| rootBounds         | DOMRectReadOnly \\| null | The rectangle that is used as the intersection observer's viewport.                      |\n| boundingClientRect | DOMRectReadOnly         | The rectangle describing the element's size and position relative to the viewport.       |\n| intersectionRect   | DOMRectReadOnly         | The rectangle describing the intersection between the observed element and the viewport. |\n| target             | Element                 | The observed element.                                                                    |\n| time               | number                  | The time at which the event was triggered.                                               |\n| event              | \"enter\" \\| \"exit\"       | The event type.                                                                          |\n\nHere is the interface for the event object.\n\n```ts\ninterface InViewEvent {\n  percentage: number;\n  rootBounds: DOMRectReadOnly | null;\n  boundingClientRect: DOMRectReadOnly;\n  intersectionRect: DOMRectReadOnly;\n  target: Element;\n  time: number;\n  event: \"enter\" | \"exit\";\n}\n```\n\n#### pause() : InView\n\nPause observing.\n\n```js\nelements.pause();\n```\n\n#### resume() : InView\n\nResume observing.\n\n```js\nelements.resume();\n```\n\n#### setDelay(delay = 0) : InView\n\nSet delay for callback.\nDefault delay is 0 ms.\n\n```js\nelements.setDelay(100);\n```\n\n## License\n\nMIT License\n\n## Author\n\n[Obaydur Rahman](https://opu.rocks)\n\n## References\n\n- [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)\n- [Intersection Observer API - Browser Support](https://caniuse.com/intersectionobserver)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopuu%2Finview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopuu%2Finview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopuu%2Finview/lists"}