react-network-status-notifier

🔔 Simple React component to notify whenever your application status changes from Online to Offline or vice-versa.

Installation

Install it from npm and import it in your root component

npm install --save react-network-status-notifier

Usage

import React from 'react';
import NetworkStateNotifier from 'react-network-status-notifier';

function App() {
  return (
    <div>
      <NetworkStateNotifier />
      <div>This is a test application</div>
    </div>
  )
}

export default App;

Props

Name |Type |Description -------------------------|----------|----------- containerClassName |{String}|The passed className is assigned to the outer container of the component. messageClassName |{String}|The passed className is assigned to each message block. containerStyles |{Object}|Styles assigned to the container of the component. messageStyles |{Object}|Styles assigned to the message block. onlineColor |{String}|Default: rgba(0, 255, 0, 0.7). The background color of the message when online. offlineColor |{String}|Default: rgba(0, 255, 0, 0.7). The background color of the message when offline. onlineMessage |{String}|Default: You're online. The actual message when device goes from online to offline. offlineMessage |{String}|Default: You're offline. The actual message when device goes from offline to online. pollInterval |{Number}|Default: 400. Milliseconds after which the check for the online status should be made. notificationTimeout|{Number}|Default: 3000. Milliseconds after which the displayed message should disappear.