Skip to content

πŸ”Œ Simple Svelte component to detect offline & online changes.

License

Notifications You must be signed in to change notification settings

vinayakkulkarni/s-offline

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

s-offline ⚑️

Continuous Integration Ship js trigger GitHub release (latest SemVer) npm npm npm bundle size (version) npm type definitions DeepScan grade Snyk Vulnerabilities for GitHub Repo LGTM Alerts LGTM Grade GitHub contributors FOSSA

eslint prettier vite svelte typescript

Features

  • Detect offline & online events for your Svelte app, inspired from v-offline
  • Built from scratch using TypeScript

Table of Contents

Demo

Edit s-offline demo

Requirements

Installation

npm install --save s-offline

CDN: UNPKG | jsDelivr (available as window.SOffline)

Build Setup

# install dependencies
$ npm ci

# package the library
$ npm run build

Usage

import { SOffline } from 's-offline';

Example

Detailed Example (refer App.svelte)
<script>
  import SOffline from 's-offline';
  const handleNetworkChange = (status) => {
    console.log('event details: ', status);
  };
</script>

<SOffline
  pingUrl="https://bitly.com"
  on:detectedCondition="{handleNetworkChange}"
>
  <span slot="online" class="online"> 😊 </span>
  <span slot="offline" class="offline"> πŸ€• </span>
</SOffline>

<style>
  .online {
    font-size: 10rem;
    text-align: center;
  }
  .offline {
    font-size: 10rem;
    text-align: center;
  }
</style>

API

Props

Name Type Required? Default Description
pingUrl String No https://google.com Pinging any url to double check if you're online or not.

Events

Name Returns Description
detectedCondition String Emits a boolean value

Built with

Contributing

  1. Fork it ( https://github.com/vinayakkulkarni/s-offline/fork )
  2. Create your feature branch (git checkout -b feat/new-feature)
  3. Commit your changes (git commit -Sam 'feat: add feature')
  4. Push to the branch (git push origin feat/new-feature)
  5. Create a new Pull Request

Note:

  1. Please contribute using GitHub Flow
  2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
  3. PS. Ensure your commits are signed. Read why

Author

s-offline Β© Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayakkulkarni.dev Β· GitHub @vinayakkulkarni Β· Twitter @_vinayak_k

License

FOSSA Status