{"id":27045037,"url":"https://github.com/mefechoel/interserver-svelte","last_synced_at":"2025-04-05T05:32:22.929Z","repository":{"id":57275315,"uuid":"263879476","full_name":"mefechoel/interserver-svelte","owner":"mefechoel","description":"IntersectionObserver simplified","archived":false,"fork":false,"pushed_at":"2020-05-14T12:56:31.000Z","size":53,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T19:51:25.775Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/mefechoel.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":"2020-05-14T10:04:56.000Z","updated_at":"2022-03-04T05:53:22.000Z","dependencies_parsed_at":"2022-09-15T19:12:37.220Z","dependency_job_id":null,"html_url":"https://github.com/mefechoel/interserver-svelte","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mefechoel%2Finterserver-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mefechoel%2Finterserver-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mefechoel%2Finterserver-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mefechoel%2Finterserver-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mefechoel","download_url":"https://codeload.github.com/mefechoel/interserver-svelte/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294200,"owners_count":20915332,"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":[],"created_at":"2025-04-05T05:31:25.440Z","updated_at":"2025-04-05T05:32:22.910Z","avatar_url":"https://github.com/mefechoel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[npm]: https://img.shields.io/npm/v/interserver-svelte.svg?style=flat-square\n[npm-url]: https://npmjs.com/package/interserver-svelte\n\n# Interserver Svelte\n\n[![npm package][npm]][npm-url]\n![npm bundle size](https://img.shields.io/bundlephobia/min/interserver-svelte?style=flat-square)\n![NPM](https://img.shields.io/npm/l/interserver-svelte?style=flat-square)\n![GitHub last commit](https://img.shields.io/github/last-commit/mefechoel/interserver-svelte?style=flat-square)\n\n\u003e IntersectionObserver simplified\n\nCheckout the main [`interserver`](https://www.npmjs.com/package/interserver) package.\n\n## Features\n\n- Tiny (~1kb minified)\n- TypeScript ready\n\n## Installation\n\nWith `yarn`:\n\n```bash\nyarn add interserver-svelte\n```\n\nWith `npm`:\n\n```bash\nnpm install --save interserver-svelte\n```\n\n## Usage\n\nThe `createInterserver` function takes the same options as the `interserver` function (`top`, `right`, `bottom`, `left` and `once`).\n\n```html\n\u003cscript\u003e\n  import createInterserver from 'interserver-svelte';\n\n  let container;\n\n  const intersecting = createInterserver(() =\u003e container);\n\n  $: if ($intersecting) {\n    console.log(\"Now you see me!\");\n  } else {\n    console.log(\"Oh, the darkness...\");\n  }\n\u003c/script\u003e\n\n\u003cdiv bind:this={container}\u003e\n  ...\n\u003c/div\u003e\n```\n\n## Example\n\nYou can build a `LazyImage` component, that only requests an image, when it is approaching the viewport:\n\n```html\n\u003c!-- LazyImage.svelte --\u003e\n\u003cscript\u003e\n  import createInterserver from 'interserver-svelte';\n\n  export let alt = '';\n  export let src = '';\n  export let srscet = null;\n\n  let container;\n\n  const intersecting = createInterserver(() =\u003e container, {\n    once: true,\n    top: 50,\n    right: 50,\n    bottom: 50,\n    left: 50,\n  });\n\n  $: src = $intersecting ? src : null;\n  $: srcset = $intersecting ? srcset : null;\n\u003c/script\u003e\n\n\u003cimg {...$$props} {src} {srcset} {alt} bind:this={container} /\u003e\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmefechoel%2Finterserver-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmefechoel%2Finterserver-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmefechoel%2Finterserver-svelte/lists"}