{"id":19522168,"url":"https://github.com/captaincodeman/svelte-intersection-observer-action","last_synced_at":"2026-02-22T22:38:03.377Z","repository":{"id":65915127,"uuid":"602328192","full_name":"CaptainCodeman/svelte-intersection-observer-action","owner":"CaptainCodeman","description":"Svelte Action for Intersection Observer","archived":false,"fork":false,"pushed_at":"2024-08-28T21:35:47.000Z","size":144,"stargazers_count":22,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T03:36:50.371Z","etag":null,"topics":["action","intersection-observer","svelte"],"latest_commit_sha":null,"homepage":"https://captaincodeman.github.io/svelte-intersection-observer-action/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CaptainCodeman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-02-16T01:11:44.000Z","updated_at":"2025-04-11T15:33:35.000Z","dependencies_parsed_at":"2024-08-28T23:02:14.506Z","dependency_job_id":null,"html_url":"https://github.com/CaptainCodeman/svelte-intersection-observer-action","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"bd0c7423619f68dbf46398054f36b9b1acfb2b1f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-intersection-observer-action","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-intersection-observer-action/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-intersection-observer-action/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-intersection-observer-action/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CaptainCodeman","download_url":"https://codeload.github.com/CaptainCodeman/svelte-intersection-observer-action/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250967225,"owners_count":21515563,"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":["action","intersection-observer","svelte"],"created_at":"2024-11-11T00:37:30.039Z","updated_at":"2026-02-22T22:38:03.318Z","avatar_url":"https://github.com/CaptainCodeman.png","language":"TypeScript","readme":"# svelte-intersection-observer-action\n\nSvelte use:action for element position notifications using IntersectionObserver.\n\nSmall. Efficient. SSR Friendly.\n\n## Purpose\n\nYou need to know when an Element intersects another, as efficiently as possible, adding as few bytes to your project as possible.\n\nThe existing packages I looked at all had one or more issues:\n\n- Not SSR compatible. Likely developed before SvelteKit, when Svelte was primarily used for client-side components.\n- Used a Svelte Component as a wrapper. This adds unnecessary overhead and bytes to your bundle.\n- Dispatch events. IMO this is also unnecessary and wasted bytes. A callback passed in to an action is simpler and more efficient.\n- Create an IntersectionObserver instance per element. Slightly less efficient and a potential waste of runtime resources, especially if many elements need to be observed, vs using a single observer as intended.\n- Only provide simplified event information, not the [complete set of IntersectionObserverEntry properties](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\n- Lack of TypeScript support.\n\nThis package is simple, fast and efficient. It is only 372 bytes minified, 243 bytes minified and gzipped.\n\n## Usage\n\nImport using your package manager of choice, e.g.:\n\n    pnpm i svelte-intersection-observer-action\n\n### Within a Svelte Component\n\nImport and apply to your HTML element. Provide the `callback` function that will be called with the `IntersectionObserverEntry` object. Optionally, provide additional `IntersectionObserver` options (`root`, `rootMargin`, and `thresholds`)\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { intersect } from 'svelte-intersection-observer-action'\n\n  let ratio = 0\n  function callback(entry: IntersectionObserverEntry) {\n    ratio = entry.intersectionRatio\n  }\n\n  // important: re-use options object for caching\n  const options = { callback }\n\u003c/script\u003e\n\n\u003cdiv use:intersect={options}\u003e\n  {ratio}\n\u003c/div\u003e\n```\n\n### Within another Svelte `use:action`\n\nImport inside your `use:action` module:\n\n```ts\nimport { intersect } from 'svelte-intersection-observer-action'\n```\n\nApply to the element passed in to your `use:action` and call the `destroy` method when your action is destroyed:\n\n```ts\ntype Render = (ctx: CanvasRenderingContext2D) =\u003e void\n\nexport function lazyload(image: HTMLImageElement) {\n  // use intersect action to watch element in viewport\n  const callback = entry =\u003e loadImage()\n  const intersectManager = intersect(image, { callback })\n\n  // rest of use:action implementation\n  function loadImage() {}\n\n  return {\n    destroy() {\n      // remember to call destroy when this action is destroyed\n      intersectManager.destroy()\n    },\n  }\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-intersection-observer-action","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaptaincodeman%2Fsvelte-intersection-observer-action","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-intersection-observer-action/lists"}