Simple React Hook for checking if you're connected to the internet.
Read about Hooks feature.
npm Version License [Linux Build Status]
yarn add react-use-is-online
npm install react-use-is-online
https://stackblitz.com/edit/react-use-is-online1
Using useIsOnline to display different messages if connectivity is present.
import React, { Fragment } from 'react'; import { useIsOnline } from 'react-use-is-online'; import InternetEnabledFeature from './InternetConnectedFeature'; import OfflineEnabledFeature from './OfflineEnabledFeature'; const BasicApp = () => { const { isOnline, isOffline, error } = useIsOnline(); return ( <Fragment> {isOnline ? <div> We're online! </div> : <div> Uh-oh looks like you should connect to the internet </div>} {isOffline ? <div> We're offline! You can still post great cat photos! </div> : <div> We're not online. </div>} </Fragment> ); };
Using useIsOnline to enable certain features based on connectivity.
import React, { Fragment } from 'react'; import { useIsOnline } from 'react-use-is-online'; import InternetEnabledFeature from './InternetConnectedFeature'; import OfflineEnabledFeature from './OfflineEnabledFeature'; const AdvancedApp = () => { const { isOnline, isOffline, error } = useIsOnline(); return ( <Fragment> { isOnline ? <InternetEnabledFeature/> : <OfflineFeature/> } </Fragment> ); };