react-use-is-online

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>
  );
};