https://github.com/codebrahma/react-network-status-notifier

Simple React component to notify whenever your application status changes from Online to Offline or vice-versa.
https://github.com/codebrahma/react-network-status-notifier

npm npm-package react

Last synced: 7 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/codebrahma/react-network-status-notifier
• Owner: Codebrahma
• Created: 2019-08-07T09:26:50.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-12-26T07:19:24.000Z (over 6 years ago)
• Last Synced: 2025-08-17T07:35:55.355Z (8 months ago)
• Topics: npm, npm-package, react
• Language: JavaScript
• Homepage:
• Size: 10.3 MB
• Stars: 2
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-network-status-notifier

![NPM Version](https://img.shields.io/badge/npm-v1.1.0-blue) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/Codebrahma/react-network-status-notifier?color=green) ![npm bundle size](https://img.shields.io/bundlephobia/min/react-network-status-notifier) ![GitHub tag (latest SemVer)](https://img.shields.io/github/tag/Codebrahma/react-network-status-notifier?color=orange) [![codecov](https://codecov.io/gh/Codebrahma/react-network-status-notifier/branch/master/graph/badge.svg)](https://codecov.io/gh/TechnionYP5777/project-name) ![Tests](https://img.shields.io/badge/tests-passing-success) [![CircleCI](https://circleci.com/gh/Codebrahma/react-network-status-notifier.svg?style=svg)](https://circleci.com/gh/Codebrahma/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

```bash

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

```

## Usage

```Javascript

import React from 'react';

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

function App() {

  return (

    


      

      
This is a test application

    

  )

}


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.