Package Exports

react-is-online-context
react-is-online-context/dist/cjs/index.js
react-is-online-context/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-is-online-context) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-is-online-context

Uses HTML5 offline and online events combined with the @Sindresorhus is-online package for accurate online/offline detection.

Storybook Demo

Features

Uses is-online for accurate online/offline detection.
Works just about everywhere window is available, including Electron.
Does not require navigator.onLine
Works on both the client and server

Install

Using NPM:

npm install react-is-online-context

Usage

import { IsOnlineContextProvider } from "react-is-online-context";
import { ComponentUsingContext } from "./ComponentUsingContext";



const AppComponent = () => {

 // See is-online for options: https://github.com/sindresorhus/is-online
 const options = {
  // timeout: 5000,
 };

 return (
  <IsOnlineContextProvider {...options}>
   <ComponentUsingContext />
  </IsOnlineContextProvider>
 );
};

// ./ComponentUsingContext
import { IsOnlineContext } from "react-is-online-context";

export const ComponentUsingContext = (props) => {
 const { isOnline, isLoading, error } = React.useContext(IsOnlineContext);

 return (
  <div>
   {isOnline ? "You are online" : "You are offline"}
  </div>
 );
};

Usage with React Hooks

import { useIsOnline } from "react-is-online-context";


export const ComponentUsingHooks = (props) => {
 const { isOnline, isLoading, error } = useIsOnline();

 return (
  <div>
   {isOnline ? "You are online" : "You are offline"}
  </div>
 );
};

API

`IsOnlineContextProvider`

The IsOnlineContextProvider component is a React Context Provider that provides the IsOnlineContext to all of its children.

`IsOnlineContext`

The IsOnlineContext is a React Context that provides the following values:

isOnline - A boolean indicating if the user is online or not.
isLoading - A boolean indicating if the isOnline value is still being determined.
error - An error object if there was an error determining the isOnline value.

`useIsOnline` hook

The useIsOnline hook provides the same values as the IsOnlineContext:

isOnline - A boolean indicating if the user is online or not.
isLoading - A boolean indicating if the isOnline value is still being determined.
error - An error object if there was an error determining the isOnline value.

FAQ

Why a React Context vs a hook?

A hook is reinitialized in every component that uses it. This means that if you have multiple components that use the hook, they will all have their own instance of the hook. A context is initialized once and can be used by multiple components.

Why not use `navigator.onLine`?

navigator.onLine is not reliable. It only tells you if the browser is currently connected to the network. It does not tell you if the user is able to reach your site. For example, the user could be connected to a wifi network, but the wifi network could be down, or the ISP could be down. Often a virtual machine will report that it is online, but it is not able to reach the internet. is-online checks if the user is able to reach the internet by pinging a few different servers. This is a much more reliable way to check if the user is online.

Credit

Thanks to Sindresorhus for his is-online package.