react-use-is-online
TypeScript icon, indicating that this package has built-in type declarations

1.2.2 • Public • Published

use-is-online

Simple React Hook for checking if you're connected to the internet.

Read about Hooks feature.

npm Version License [Linux Build Status]

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

/react-use-is-online/

    Package Sidebar

    Install

    npm i react-use-is-online

    Weekly Downloads

    1,335

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    9.75 kB

    Total Files

    11

    Last publish

    Collaborators

    • cacheflow