← Lakhan Samani | Digital Garden

React Navigator Status

Adding online/offline status to your application can make it more user intuitive and helps users in taking quick actions before interacting with the application. react-navigator-status exports a component and a hook that you can use to show online/offline alerts to your users.

Demo

Code Sandbox

This component is inspired by react-detect-offline. The major benefit of using this that instead of polling network status this component uses online and offline event listeners https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events. Also, it is written in TypeScript and follows type-safe measures.

How to use?

Installation

  • Yarn: yarn add react-navigator-status
  • npm: npm install react-navigator-status

Usage

You can use this package in 3 ways

  1. Default component
  2. using the hook
  3. using the render props with default component

1. Default Component

1import * as React from "react" 2import { NavigatorStatus } from "react-navigator-status" 3 4const App = () => { 5 return <NavigatorStatus /> 6}

2. Using Hook

  • useNavigatorStatus hook returns the online status and listens to the network change in real time
1import * as React from "react" 2import { useNavigatorStatus } from "react-navigator-status" 3 4// doesn't show alert initially 5// show offline alert forever 6// show online alert for 4s 7 8const Alert: React.FC<{ isOnline: boolean }> = ({ isOnline }) => { 9 const [showAlert, setShowAlert] = React.useState(false) 10 11 React.useEffect(() => { 12 let isMounted = true 13 14 if (isOnline && showAlert && isMounted) { 15 setShowAlert(true) 16 17 setTimeout(() => { 18 if (isMounted) { 19 setShowAlert(false) 20 } 21 }, 4000) 22 } 23 24 if (!isOnline && isMounted) { 25 setShowAlert(true) 26 } 27 28 return () => { 29 isMounted = false 30 } 31 }, [isOnline]) 32 33 return ( 34 <div 35 style={{ 36 fontFamily: `sans-serif`, 37 }} 38 > 39 {showAlert && ( 40 <div 41 style={{ 42 color: "white", 43 padding: 20, 44 marginBottom: 20, 45 background: isOnline ? `rgb(59, 201, 149)` : `#ff5733`, 46 }} 47 > 48 {isOnline 49 ? `You are online` 50 : `You are offline please check your connection`} 51 </div> 52 )} 53 <p>Change the network status to see the alert</p> 54 </div> 55 ) 56} 57 58const App = () => { 59 const isOnline = useNavigatorStatus() 60 return <Alert isOnline={isOnline} /> 61}

3. With render props

  • NavigatorStatus component gives you render prop with isOnline which you can use further to render alert as per your needs.
1import * as React from "react" 2import { NavigatorStatus } from "react-navigator-status" 3 4// doesn't show alert initially 5// show offline alert forever 6// show online alert for 4s 7 8const Alert: React.FC<{ isOnline: boolean }> = ({ isOnline }) => { 9 const [showAlert, setShowAlert] = React.useState(false) 10 11 React.useEffect(() => { 12 let isMounted = true 13 14 if (isOnline && showAlert && isMounted) { 15 setShowAlert(true) 16 17 setTimeout(() => { 18 if (isMounted) { 19 setShowAlert(false) 20 } 21 }, 4000) 22 } 23 24 if (!isOnline && isMounted) { 25 setShowAlert(true) 26 } 27 28 return () => { 29 isMounted = false 30 } 31 }, [isOnline]) 32 33 return ( 34 <div 35 style={{ 36 fontFamily: `sans-serif`, 37 }} 38 > 39 {showAlert && ( 40 <div 41 style={{ 42 color: "white", 43 padding: 20, 44 marginBottom: 20, 45 background: isOnline ? `rgb(59, 201, 149)` : `#ff5733`, 46 }} 47 > 48 {isOnline 49 ? `You are online` 50 : `You are offline please check your connection`} 51 </div> 52 )} 53 <p>Change the network status to see the alert</p> 54 </div> 55 ) 56} 57 58const App = () => { 59 return ( 60 <NavigatorStatus> 61 {({ isOnline }) => <Alert isOnline={isOnline} />} 62 </NavigatorStatus> 63 ) 64}

Enjoy using react-navigator-status and shower some love to github repo 🎉