Handle Connectivity Changes in React with the useOnline Hook

Description:

The React useOnline hook is a handy utility for detecting when a user goes online or offline.

It can be helpful for notifying users when they’ve lost connection, disabling features that require internet access, showing cached data, and more.

How to use it:

1. Install and import the useOnline Hook.

# NPM
$ npm i @uiw/react-use-online
import React from "react";
import { useOnline } from '@uiw/react-use-online';

2. Call the hook to get the current online state. The isOnline variable will be true if online and false if offline. Then use the value to render UI conditionally:

export default function App() {
  const isOnline = useOnline();
  return (
    <div>
      <div>{isOnline ? 'Online' : 'Offline'}</div>
    </div>
  );
}

Preview:

Handle Connectivity Changes in React with the useOnline Hook

Tags:

Add Comment