s-offline
v0.7.1
Published
Offline and Online network detection 🗼
Downloads
96
Maintainers
Readme
s-offline ⚡️
Features
- Detect offline & online events for your Svelte app, inspired from v-offline
- Built from scratch using TypeScript
Table of Contents
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
<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
- Fork it ( https://github.com/vinayakkulkarni/s-offline/fork )
- Create your feature branch (
git checkout -b feat/new-feature
) - Commit your changes (
git commit -Sam 'feat: add feature'
) - Push to the branch (
git push origin feat/new-feature
) - Create a new Pull Request
Note:
- Please contribute using GitHub Flow
- Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
- 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