Skip to content
CannonReactHooks

useOnline Hook

Introduction

A custom React Hook for detecting online/offline status.

Play

Usage

import { useOnline } from "@cannonui/reacthooks";
const TestUseOnline = () => {
  const online = useOnline();
  return <div>{online ? "online" : "not online"}</div>;
};
export default TestUseOnline;

Return Value

The hook returns a boolean value indicating whether the browser is online or offline.

Features

  • Detects the online/offline status of the browser.
  • Provides a boolean value indicating whether the browser is online (true) or offline (false).

Example

In this example, we have a component called TestUseOnline that uses the useOnline Hook to detect the online/offline status of the browser. The hook listens for the online and offline events of the window object and updates the online state accordingly.

Use Scenario

The useOnline Hook is useful in scenarios where you want to detect the online/offline status of the browser and perform certain actions based on the network connectivity. For example, you might want to show a notification when the user goes offline or fetch data from the server when the user comes back online. By using the useOnline Hook, you can easily handle online/offline events and implement network-aware behavior in your React application.