s-offline
Version:
Offline and Online network detection 🗼
159 lines (118 loc) • 6.84 kB
Markdown
# s-offline ⚡️
[](https://github.com/vinayakkulkarni/s-offline/actions/workflows/ci.yml)
[](https://github.com/vinayakkulkarni/s-offline/actions/workflows/shipjs-trigger.yml)
[](https://github.com/vinayakkulkarni/s-offline/releases)
[](https://www.npmjs.com/package/s-offline)
[](http://npm-stat.com/charts.html?package=s-offline)
[](https://bundlephobia.com/package/s-offline@latest)
[](https://github.com/vinayakkulkarni/s-offline/blob/master/package.json)
[](https://deepscan.io/dashboard#view=project&tid=9055&pid=16121&bid=339368)
[](https://snyk.io/test/github/vinayakkulkarni/s-offline)
[](https://lgtm.com/projects/g/vinayakkulkarni/s-offline/alerts/)
[](https://lgtm.com/projects/g/vinayakkulkarni/s-offline/context:javascript)
[](https://github.com/vinayakkulkarni/s-offline/graphs/contributors)
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fvinayakkulkarni%2Fs-offline?ref=badge_shield)
[](https://eslint.org/)
[](https://prettier.io/)
[](https://vitejs.dev/)
[](https://svelte.dev/)
[](https://www.typescriptlang.org/)
## Features
- Detect offline & online events for your Svelte app, inspired from [v-offline](https://github.com/vinayakkulkarni/v-offline)
- Built from scratch using TypeScript
## Table of Contents
- [s-offline ⚡️](#s-offline-️)
- [Features](#features)
- [Table of Contents](#table-of-contents)
- [Demo](#demo)
- [Requirements](#requirements)
- [Installation](#installation)
- [Build Setup](#build-setup)
- [Usage](#usage)
- [Example](#example)
- [API](#api)
- [Props](#props)
- [Events](#events)
- [Built with](#built-with)
- [Contributing](#contributing)
- [Author](#author)
- [License](#license)
## Demo
[](https://stackblitz.com/edit/s-offline?file=src/App.svelte)
## Requirements
- [Svelte 3](https://svelte.dev/)
### Installation
```sh
npm install --save s-offline
```
CDN: [UNPKG](https://unpkg.com/s-offline/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/s-offline/dist/) (available as `window.SOffline`)
### Build Setup
```bash
# install dependencies
$ npm ci
# package the library
$ npm run build
```
## Usage
```javascript
import { SOffline } from 's-offline';
```
#### Example
<details>
<summary>
<em>Detailed Example (<a href="examples/App.svelte">refer App.svelte</a>)</em>
</summary>
```html
<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>
```
</details>
## 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](https://www.typescriptlang.org/)
- [Svelte 3](https://svelte.dev/)
## Contributing
1. Fork it ( [https://github.com/vinayakkulkarni/s-offline/fork](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](https://github.com/vinayakkulkarni/s-offline/compare)
_Note_:
1. Please contribute using [GitHub Flow](https://web.archive.org/web/20191104103724/https://guides.github.com/introduction/flow/)
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the [conventional commit standard](https://www.conventionalcommits.org/), _read more about it [here](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)_
3. PS. Ensure your commits are signed. _[Read why](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html)_
## Author
**s-offline** © [Vinayak](https://vinayakkulkarni.dev), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by Vinayak Kulkarni with help from contributors ([list](https://github.com/vinayakkulkarni/s-offline/contributors)).
> [vinayakkulkarni.dev](https://vinayakkulkarni.dev) · GitHub [@vinayakkulkarni](https://github.com/vinayakkulkarni) · Twitter [@\_vinayak_k](https://twitter.com/_vinayak_k)
## License
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fvinayakkulkarni%2Fs-offline?ref=badge_large)