{"id":15663559,"url":"https://github.com/abdallahhemdan/vee-observe","last_synced_at":"2025-05-05T23:44:33.879Z","repository":{"id":148379230,"uuid":"618926085","full_name":"AbdallahHemdan/vee-observe","owner":"AbdallahHemdan","description":"Detect when an element is becoming visible or hidden on the page using Vue component for the Intersection observer API","archived":false,"fork":false,"pushed_at":"2023-03-27T22:10:59.000Z","size":263,"stargazers_count":17,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-29T10:48:56.039Z","etag":null,"topics":["intersection-observer","scrolling","vee-observe","viewport","vuejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vee-observe","language":"Vue","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/AbdallahHemdan.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-25T18:44:14.000Z","updated_at":"2024-04-24T14:54:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"fb000c92-bfd2-41fe-8899-08826bc44504","html_url":"https://github.com/AbdallahHemdan/vee-observe","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdallahHemdan%2Fvee-observe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdallahHemdan%2Fvee-observe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdallahHemdan%2Fvee-observe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdallahHemdan%2Fvee-observe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AbdallahHemdan","download_url":"https://codeload.github.com/AbdallahHemdan/vee-observe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251758162,"owners_count":21638988,"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","scrolling","vee-observe","viewport","vuejs"],"created_at":"2024-10-03T13:38:16.986Z","updated_at":"2025-05-05T23:44:33.851Z","avatar_url":"https://github.com/AbdallahHemdan.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://github.com/AbdallahHemdan/vee-observe\" rel=\"noopener\"\u003e\n  \n  \u003cimg width=\"800\" alt=\"Vee Observe\" src=\"https://user-images.githubusercontent.com/40190772/227812825-f5e71b1a-cc02-413e-b50b-29cbf82f486e.png\"\u003e\n\n\u003c/div\u003e\n\n\u003ch3 align=\"center\"\u003eVee Observe\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Version Badge][npm-version-svg]][package-url]\n[![GZipped size][npm-minzip-svg]][bundlephobia-url]\n[![License][license-image]][license-url]\n[![Downloads][downloads-image]][downloads-url]\n\u003ca href=\"https://vuejs.org/\"\u003e\u003cimg src=\"https://img.shields.io/badge/vue-2.x-brightgreen.svg\"/\u003e\u003c/a\u003e\n[![GitHub contributors](https://img.shields.io/github/contributors/AbdallahHemdan/vee-observe)](https://github.com/AbdallahHemdan/vee-observe/contributors)\n[![GitHub stars](https://img.shields.io/github/stars/AbdallahHemdan/vee-observe)](https://github.com/AbdallahHemdan/vee-observe/stargazers)\n\n\u003c/div\u003e\n\n\u003e Vue implementation of the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to tell you when an element enters or leaves the viewport.\n\n## Features\n\n- 📦 **Component API** - With `vee-observe` it's easier than ever to monitor elements\n- ⚡️ **Optimized performance** - Reuses Intersection Observer instances where possible\n- ⚙️ **Matches native API** - Intuitive to use\n- 🧪 **Ready to test** - Mocks the Intersection Observer for easy testing with [Jest](https://jestjs.io/)\n- 💥 **Tiny bundle** - Around **1.1kB**\n\n## Installation\n\nInstall using [Yarn](https://yarnpkg.com):\n\n```sh\nyarn add vee-observe\n```\n\nor NPM:\n\n```sh\nnpm install vee-observe --save\n```\n\n## Usage\n\n### `vee-observe` component\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdiv class=\"large-content__wrapper\"\u003e\n      Scroll down to see the image\n    \u003c/div\u003e\n\n    \u003cvee-observe\n      :root=\"null\"\n      :root-margin=\"'0px'\"\n      :threshold=\"0\"\n      :once=\"false\"\n      @on-change=\"onChange\"\n      @not-supported=\"notSupported\"\n    \u003e\n      \u003cimg :src=\"imgSrc\" /\u003e\n    \u003c/vee-observe\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VeeObserve from './components/observer/observer.vue';\n\nexport default {\n  name: 'App',\n  data () {\n    return {\n      imgSrc: '',\n    };\n  },\n  components: { VeeObserve },\n  methods: {\n    onChange (entry) {\n      console.log('on change', entry);\n      if (entry.isIntersecting) {\n        console.log('intersecting');\n        this.imgSrc = 'https://picsum.photos/200/300';\n      }\n    },\n    \n    notSupported () {\n      console.log('not supported');\n      this.imgSrc = 'https://picsum.photos/200/300';\n    },\n  },\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.large-content__wrapper {\n  height: 2000px;\n  line-height: 1000px;\n  text-align: center;\n  font-size: 48px;\n  color: #2c3e50;\n  font-weight: bold;\n}\n\u003c/style\u003e\n\n```\n\n## API\n\n### Options\n\nProvide these as the options argument as props on the **`\u003cvee-observe /\u003e`** component.\n\n| Name           | Type                         | Default     | Description |\n| ---------------| -----------------------------| ----------- | ----------- |\n| **root**       | `Element`                    | `document`  | The Intersection Observer interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is `null`, then the bounds of the actual document viewport are used.  |\n| **rootMargin** | `string`                     | `'0px'`     | Margin around the root. Can have values similar to the CSS margin property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros. |\n| **threshold**  | `number` or `number[]`       | `0`         | Number between `0` and `1` indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |\n| **once**       | `boolean`                    | `false`     | Only trigger the observer once. |\n| **onChange**   | `(entry, unobserve) =\u003e void` | `undefined` | Call this function whenever the intersection state changes. It will receive the current `IntersectionObserverEntry` along with `unobserve` function to stop monitoring and observing the component. |\n| **notSupported**   | `() =\u003e void` | `undefined` | Call this function if intersection observer is not support. |\n\n[package-url]: https://www.npmjs.com/package/vee-observe\n[npm-version-svg]: https://img.shields.io/npm/v/vee-observe.svg\n[npm-minzip-svg]:\n  https://img.shields.io/bundlephobia/minzip/vee-observe.svg\n[bundlephobia-url]:\n  https://bundlephobia.com/result?p=vee-observe\n[license-image]: http://img.shields.io/npm/l/vee-observe.svg\n[license-url]: LICENSE\n[downloads-image]: http://img.shields.io/npm/dm/vee-observe.svg\n[downloads-url]:\n  http://npm-stat.com/charts.html?package=vee-observe\n[test-image]:\n  https://github.com/thebuilder/vee-observe/workflows/Test/badge.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdallahhemdan%2Fvee-observe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdallahhemdan%2Fvee-observe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdallahhemdan%2Fvee-observe/lists"}