useOnlineStatus

useOnlineStatus is a custom React hook that tracks the online/offline status of the user's network connection.

Usage

import { useOnlineStatus } from "hookify-react";

export default function UseOnlineStatusExample() {
  const { isOnline, onlineStatus } = useOnlineStatus();

  return (
    <div>
      {isOnline
        ? `You are ${onlineStatus} 😁`
        : `You are ${onlineStatus} 😥`}
    </div>
  );
}

API Reference

Parameters

This hook does not take any parameters.

Return Value

useOnlineStatus returns an object with the following properties:

Property	Type	Description
isOnline	boolean	true when the browser reports a connection, otherwise false.
onlineStatus	"online" | "offline"	A string version of the current network status.

Behavior

• Initializes from navigator.onLine in the browser.
• Listens to both the online and offline window events and updates the state accordingly.
• Ideal for network status indicators or handling offline scenarios.

SSR Safety

useOnlineStatus is safe during server-side rendering. navigator is unavailable on the server, so it assumes "online" (isOnline: true) during SSR.