React Network Status Notification (React-nsn)

Component	Example

React-nsn offers convenient and customizable

1. Network status hook useOnlineStatus()
   • app online network status
   • status time info
   • network information
   • custom polling
2. Notification component <OnlineStatusNotification/>

Table of Contents

• Online demo
• How to use
• Documentation
• Compatibility
• License

Online demo

https://amrahmeda.github.io/react-nsn

Getting Started

npm

npm i react-nsn

How to use

add <OnlineStatusNotification/> to your app, preferably at root level.

import { OnlineStatusNotification, useOnlineStatus } from 'react-nsn'

function App() {
  const {
    attributes,
    isOnline,
    time: { difference, since },
    connectionInfo,
  } = useOnlineStatus()

  // logs current connection info
  console.log(connectionInfo)

  const statusText = isOnline ? `online` : `offline`

  return (
    <div>
      <h1>{`App is ${statusText}`}</h1>
      <h1>{`the app is ${statusText} since: ${since}`}</h1>
      <h1>{`difference in time since the component was ${statusText}: ${difference}`}</h1>
      <OnlineStatusNotification darkMode={true} {...attributes} />
    </div>
  )
}

Documentation

<OnlineStatusNotification/> has the following props:

Name	Type	Default	Description
darkMode	boolean	false	toggle dark mode
destroyOnClose	boolean	true	destroy when notification component unmount
duration	number	4500ms	duration of the notification when it pops up on screen before hiding back
onRefreshClick	function		derived from eventsCallback, callback function triggered when refresh is clicked during offline status
onCloseClick	function		derived from eventsCallback, callback function triggered when close button is clicked
position	string	bottomLeft	bottomLeft bottomRight centered
statusText.online	string	Your internet connection was restored.	add your custom online text
statusText.offline	string	You are currently offline.	add your custom offline text

useOnlineStatus hook has the following arguments:

Name	Type	Default	Description
pollingUrl	string	https://www.gstatic.com/generate_204	the url used to perform polling
pollingDuration	number	12000ms	fixed delays time between requests

useOnlineStatus hook offers the following:

Name	Type	Default	Description
isOnline	boolean		app online status
isOffline	boolean		app offline status
time.since	Date		specifies the date of the last status
time.difference	string		the difference in time between latest network status and the current time
connectionInfo			The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi, 'cellular', etc.).
attributes	object		passed to <OnlineStatusNotification/> as prop

Compatibility

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	latest version	latest version	latest version	latest version

License

React-nsn is released under the MIT license.