istatus

A plugin to beautify internet status alert.

Installation

npm install istatus --save

or

yarn add istatus

or use CDN

<script src="https://cdn.jsdelivr.net/npm/istatus@1.0.5/build/istatus.min.js">

Usage

ES6 Module

import iStatus from 'iStatus';

iStatus();

CommonJs

const iStatus = require('iStatus');

iStatus();

Browsers

<script src='https://cdn.jsdelivr.net/npm/istatus@1.0.5/build/istatus.min.js'></script>

<script>
    window.onload = function () {
        iStatus();
    }
</script>

Available default themes

{
  "basic": {
    "theme" : "basic",
    "mode" : "light",
    "icon" : {
      "connected": "check",
      "disconnected": "cross"
    },
    "message" : {
      "connected" : "Internet connected",
      "disconnected" : "Internet disconnected"
    },
    "runEvery" : 30,
    "deleteAfter" : 10,
    "position" : "bottomLeft"
  }
}

How to use iStatus ?

The most basic way is to use default settings.

iStatus();

or you may extend default theme settings

iStatus({
    "theme": "basic",
    "mode": "dark"
});

or

iStatus({
    "theme": "basic",
    "message": {
        "connected": "Connected",
        "disconnected": "Disconnected"
    },
    "runEvery": 60,
    "deleteAfter": 15,
    "position": "topRight"
});

or use fontawesome like icons/images

iStatus({
    "theme": "basic",
    "icon": {
        "connected": "fas fa-wifi",
        "disconnected": "fas fa-wifi-slash"
    }
});

Notification configuration

Property	Description	Type	Default	Options
theme	Name of the theme to use. Ex: CSS class name	string	basic	Future developments
mode	Light/Dark UI for notification.	string	light	"light", "dark"
icon	Small message icons inside the notification. Note: Higher precendence over property "image". If used, will overwrite "image"	string	connected: "check symbol", disconnected: "cross symbol"	Can pass fontawesome like class names Ex: fas fa-wifi or fas fa-wifi-slash
message	Notification message to show inside the notification.	string	connected: "Internet connected", disconnected: "Internet disconnected"	Pass own message as an object. Check how to use section.
runEvery	Will check internet status every mentioned number of seconds. Suitable value is 30 or above.	number	30	Type in seconds.
deleteAfter	Will remove notification once status changes to connected automatically.	number	10	Type in seconds.
position	Align the notification in four different positions.	string	bottomLeft	bottomLeft, bottomRight, topLeft, topRight

Contributing

If you're changing the core library:

1. Clone repository and run npm install.
2. Make changes in the src and add theme configuration inside the themeConfig.js file, if any.
3. Test build at your end properly.
4. Submit pull request.

If you're changing the documentation:

1. Make changes in the readme.md file and explain everything well.
2. Preview changes and make sure everything is aligned.
3. Submit pull request