oskarkrawczyk / heyoffline

Warn your users when their network goes down. Make sure they don't lose anything.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

🔌 Heyoffline

Notify your users when their network goes down. Make sure they don't lose anything.

Features

  • Notify on general network outage
  • Notify only when users have unsaved form field states
  • Default, pretty generic, good looking styles

Setup

Module

NPM: heyoffline

import Heyoffline from "./dist/heyoffline.esm.js"
new Heyoffline()

Browser

UNPKG: https://unpkg.com/heyoffline@latest/dist/heyoffline.umd.js

<script src="dist/heyoffline.umd.js"></script>
new Heyoffline({
  monitorFields: true,
  fields: ".monitoredFields"
});

Options

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

Events

Name Provides Description
onOnline Fires then the network becomes available
onOffline Fires when the network disappears

Requirements

Heyoffline is framework-agnostic vanilla JS.

Source code

All efforts have been made to keep the source as clean and readable as possible.

Requirements

Heyoffline.js is released under an MIT License, so do with it what you will.

About

Warn your users when their network goes down. Make sure they don't lose anything.


Languages

Language:JavaScript 96.3%Language:HTML 3.7%