{"id":28325097,"url":"https://github.com/said-m/svelte-connection-status","last_synced_at":"2026-04-28T18:03:05.309Z","repository":{"id":57375173,"uuid":"372097408","full_name":"said-m/svelte-connection-status","owner":"said-m","description":"Basic Svelte component and stores to detect offline \u0026 online changes","archived":false,"fork":false,"pushed_at":"2021-05-30T14:04:23.000Z","size":8,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-25T20:12:01.871Z","etag":null,"topics":["connection","network","offline","online","svelte"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/svelte-connection-status","language":"JavaScript","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/said-m.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":"2021-05-30T01:04:41.000Z","updated_at":"2024-05-27T01:22:38.000Z","dependencies_parsed_at":"2022-09-05T13:21:09.060Z","dependency_job_id":null,"html_url":"https://github.com/said-m/svelte-connection-status","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/said-m/svelte-connection-status","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said-m%2Fsvelte-connection-status","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said-m%2Fsvelte-connection-status/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said-m%2Fsvelte-connection-status/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said-m%2Fsvelte-connection-status/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/said-m","download_url":"https://codeload.github.com/said-m/svelte-connection-status/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said-m%2Fsvelte-connection-status/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261479069,"owners_count":23164620,"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":["connection","network","offline","online","svelte"],"created_at":"2025-05-25T20:11:58.507Z","updated_at":"2026-04-28T18:03:05.304Z","avatar_url":"https://github.com/said-m.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-connection-status\n\nBasic Svelte component and stores to detect offline \u0026 online changes.\n\nUses `navigator.onLine` API and makes ping requests (if page is visible) to be sure of the connection status.\nYou can disable pinging or chage its settings: interval, url.\n\n- [svelte-connection-status](#svelte-connection-status)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [component](#component)\n    - [stores](#stores)\n  - [Settings](#settings)\n    - [default](#default)\n    - [disable ping](#disable-ping)\n    - [ping params](#ping-params)\n\n## Installation\n\n```bash\nyarn add svelte-connection-status -T\n# or:\nnpm i svelte-connection-status -E\n```\n\n## Usage\n\n### component\n\n```svelte\n\u003cscript\u003e\n  import { ConnectionStatus } from 'svelte-connection-status';\n\n  function handleChange({ detail }) {\n    if (detail.isOffline) {\n      console.log('\u003e\u003e\u003e you are offline');\n    }\n\n    if (detail.isOnline) {\n      console.log('\u003e\u003e\u003e you are online');\n    }\n  }\n\u003c/script\u003e\n\n\u003cp\u003e\n  you are\n  \u003cConnectionStatus on:change={handleChange}\u003e\n    \u003cspan slot=\"offline\"\u003eoffline :(\u003c/span\u003e\n    \u003cspan slot=\"online\"\u003eonline :)\u003c/span\u003e\n  \u003c/ConnectionStatus\u003e\n\u003c/p\u003e\n```\n\n### stores\n\n```svelte\n\u003cscript\u003e\n  import { isOffline } from 'svelte-connection-status';\n\u003c/script\u003e\n\n\u003cp\u003eyou are {$isOffline ? 'offline :(' : 'online :)'}\u003c/p\u003e\n```\n\n```svelte\n\u003cscript\u003e\n  import { isOnline } from 'svelte-connection-status';\n\u003c/script\u003e\n\n{#if !$isOnline}\n  \u003cp\u003echeck your network settings...\u003c/p\u003e\n{:else}\n  \u003cp\u003ehello there\u003c/p\u003e\n{/if}\n```\n\n## Settings\n\n### default\n\n```js\n{\n  usePing: true,\n  interval: 7000,\n  url: 'https://github.com/sveltejs/svelte/blob/master/package.json',\n}\n```\n\n### disable ping\n\n```js\nimport { setSettings } from 'svelte-connection-status';\nimport App from './App.svelte';\n\nsetSettings({\n  usePing: false;\n});\n\nconst app = new App({\n  target: document.body,\n});\n\nexport default app;\n```\n\n### ping params\n\n```js\nimport { setSettings } from 'svelte-connection-status';\nimport App from './App.svelte';\n\nsetSettings({\n  interval: 5000,\n  url: 'https://www.google.com',\n});\n\nconst app = new App({\n  target: document.body,\n});\n\nexport default app;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaid-m%2Fsvelte-connection-status","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaid-m%2Fsvelte-connection-status","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaid-m%2Fsvelte-connection-status/lists"}