Notify your users when their network goes down. Make sure they don't lose anything.
- Notify on general network outage
- Notify only when users have unsaved form field states
- Default, pretty generic, good looking styles
NPM: heyoffline
import Heyoffline from "./dist/heyoffline.esm.js"
new Heyoffline()UNPKG: https://unpkg.com/heyoffline@latest/dist/heyoffline.umd.js
<script src="dist/heyoffline.umd.js"></script>new Heyoffline({
monitorFields: true,
fields: ".monitoredFields"
});| Name | Type | Default | Description |
|---|---|---|---|
| monitorFields | boolean | false | If this option is enabled, message on network error will be shown only if a input/textarea/select/etc on the page was modified |
| prefix | string | heyoffline | Class prefix for generated elements |
| noStyles | boolean | false | Don't use the default CSS (generated by JS) |
| disableDimiss | boolean | false | By default the user can dismiss the warning. With this option you can hide the dismiss button. |
| fields | string | "input, select, textarea, *[contenteditable]" |
Field elements that will be monitored for changes - see monitorFields option. |
| text.offline.title | string | You're currently offline | Heading of the modal window |
| text.offline.content | string | Wait until your network comes back before continuing. | Body message of the modal window |
| text.offline.button | string | Dismiss | Dismissal button of the modal window |
| text.offline.icon | string | SVG icon | Modal icon |
| Name | Provides | Description |
|---|---|---|
| onOnline | Fires then the network becomes available | |
| onOffline | Fires when the network disappears |
Heyoffline is framework-agnostic vanilla JS.
All efforts have been made to keep the source as clean and readable as possible.
Heyoffline.js is released under an MIT License, so do with it what you will.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent