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

    1.0.3 • 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 Bundle size Bundle size

    Installation

    yarn add react-use-is-online --save 
    

    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>
          {error ? <div> there's an error {error} </div> : null }
          {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>
      );
    };

    Install

    npm i react-use-is-online

    DownloadsWeekly Downloads

    691

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    7.07 kB

    Total Files

    10

    Last publish

    Collaborators

    • cacheflow