https://github.com/said-m/svelte-connection-status
Basic Svelte component and stores to detect offline & online changes
https://github.com/said-m/svelte-connection-status
connection network offline online svelte
Last synced: about 2 months ago
JSON representation
Basic Svelte component and stores to detect offline & online changes
- Host: GitHub
- URL: https://github.com/said-m/svelte-connection-status
- Owner: said-m
- License: mit
- Created: 2021-05-30T01:04:41.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-30T14:04:23.000Z (about 5 years ago)
- Last Synced: 2025-05-25T20:12:01.871Z (about 1 year ago)
- Topics: connection, network, offline, online, svelte
- Language: JavaScript
- Homepage: https://npmjs.com/package/svelte-connection-status
- Size: 7.81 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-connection-status
Basic Svelte component and stores to detect offline & online changes.
Uses `navigator.onLine` API and makes ping requests (if page is visible) to be sure of the connection status.
You can disable pinging or chage its settings: interval, url.
- [svelte-connection-status](#svelte-connection-status)
- [Installation](#installation)
- [Usage](#usage)
- [component](#component)
- [stores](#stores)
- [Settings](#settings)
- [default](#default)
- [disable ping](#disable-ping)
- [ping params](#ping-params)
## Installation
```bash
yarn add svelte-connection-status -T
# or:
npm i svelte-connection-status -E
```
## Usage
### component
```svelte
import { ConnectionStatus } from 'svelte-connection-status';
function handleChange({ detail }) {
if (detail.isOffline) {
console.log('>>> you are offline');
}
if (detail.isOnline) {
console.log('>>> you are online');
}
}
you are
offline :(
online :)
```
### stores
```svelte
import { isOffline } from 'svelte-connection-status';
you are {$isOffline ? 'offline :(' : 'online :)'}
```
```svelte
import { isOnline } from 'svelte-connection-status';
{#if !$isOnline}
check your network settings...
{:else}
hello there
{/if}
```
## Settings
### default
```js
{
usePing: true,
interval: 7000,
url: 'https://github.com/sveltejs/svelte/blob/master/package.json',
}
```
### disable ping
```js
import { setSettings } from 'svelte-connection-status';
import App from './App.svelte';
setSettings({
usePing: false;
});
const app = new App({
target: document.body,
});
export default app;
```
### ping params
```js
import { setSettings } from 'svelte-connection-status';
import App from './App.svelte';
setSettings({
interval: 5000,
url: 'https://www.google.com',
});
const app = new App({
target: document.body,
});
export default app;
```