react-use-is-online
v1.2.2
Published
A React hook for detecting if you are online or offline.
Downloads
19,184
Maintainers
Readme
use-is-online
Simple React Hook for checking if you're connected to the internet.
Read about Hooks feature.
Installation
Installing with Yarn
yarn add react-use-is-online
Installing with NPM
npm install react-use-is-online
Demo
https://stackblitz.com/edit/react-use-is-online1
Examples
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>
);
};