README.md

s-offline ⚡️

Features

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

Table of Contents

• s-offline ⚡️
  • Features
  • Table of Contents
  • Demo
  • Requirements
    • Installation
    • Build Setup
  • Usage - Example
  • API
    • Props
    • Events
  • Built with
  • Contributing
  • Author
  • License

Demo

Requirements

• Svelte 3

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

• TypeScript
• Svelte 3

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