Handle Connectivity Changes in React with the useOnline Hook

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:

Download Details:

Author:

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: uiwjs

License: MIT