Neonatal Penguin March

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

    1.1.0 • 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>
          {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

    565

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    214 kB

    Total Files

    8

    Last publish

    Collaborators

    • cacheflow