useOnline

Installation

npx shadcn@latest add https://r.fiberui.com/r/hooks/use-online.json

Features

Real-time Status - Detects when the browser goes offline or online.
SSR Safe - Returns true by default on server (optimistic UI).
Simple API - No configuration needed.

Source Code

View the full hook implementation in the Hook Source Code section below.

Interactive Example

Network Status

Toggle your network connection (or go offline in DevTools) to see the state change.

You are Online

"use client";

import { useOnline } from "@repo/hooks/dom/use-online";
import { Wifi, WifiOff } from "lucide-react";

export const Example1 = () => {
    const isOnline = useOnline();

    return (
        <div className="flex w-full max-w-md flex-col gap-4">
            <div className="flex items-center gap-2">
                {isOnline ? (
                    <Wifi className="text-primary h-5 w-5" />
                ) : (
                    <WifiOff className="text-destructive h-5 w-5" />
                )}
                <h3 className="font-semibold">Network Status</h3>
            </div>

            <p className="text-muted-foreground text-sm">
                Toggle your network connection (or go offline in DevTools) to
                see the state change.
            </p>

            <div
                className={`flex items-center justify-between rounded-lg border p-4 transition-colors ${
                    isOnline
                        ? "border-green-500/20 bg-green-500/10"
                        : "border-red-500/20 bg-red-500/10"
                }`}
            >
                <div className="flex items-center gap-3">
                    <div
                        className={`h-3 w-3 rounded-full ${
                            isOnline ? "bg-green-500" : "bg-red-500"
                        }`}
                    />
                    <span className="font-medium">
                        {isOnline ? "You are Online" : "You are Offline"}
                    </span>
                </div>
            </div>

            {!isOnline && (
                <div className="text-muted-foreground text-xs">
                    Last check: {new Date().toLocaleTimeString()}
                </div>
            )}
        </div>
    );
};

const isOnline = useOnline();

if (!isOnline) {
    return <OfflineBanner />;
}

Disable Form When Offline

Prevents submission and shows a warning when offline.

Network-Aware Form

"use client";

import { useOnline } from "@repo/hooks/dom/use-online";
import { AlertCircle, CheckCircle2 } from "lucide-react";

export const Example2 = () => {
    const isOnline = useOnline();

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        alert("Form submitted successfully!");
    };

    return (
        <div className="flex w-full max-w-md flex-col gap-4">
            <h3 className="font-semibold">Network-Aware Form</h3>

            <form
                onSubmit={handleSubmit}
                className="space-y-4 rounded-lg border p-4"
            >
                <div className="space-y-2">
                    <label className="text-sm font-medium">Message</label>
                    <textarea
                        className="bg-background w-full rounded-md border px-3 py-2 text-sm disabled:opacity-50"
                        placeholder="Type your message..."
                        disabled={!isOnline}
                        rows={3}
                    />
                </div>

                <button
                    type="submit"
                    disabled={!isOnline}
                    className={`text-primary-foreground flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
                        isOnline
                            ? "bg-primary hover:bg-primary/90"
                            : "bg-muted text-muted-foreground cursor-not-allowed"
                    }`}
                >
                    {isOnline ? (
                        <>
                            <CheckCircle2 className="h-4 w-4" />
                            Send Message
                        </>
                    ) : (
                        <>
                            <AlertCircle className="h-4 w-4" />
                            Offline - Cannot Send
                        </>
                    )}
                </button>
            </form>

            {!isOnline && (
                <div className="border-destructive/20 bg-destructive/10 text-destructive rounded-md border p-3 text-sm">
                    <p className="flex items-center gap-2">
                        <AlertCircle className="h-4 w-4" />
                        <strong>Connection Lost:</strong> You must be online to
                        submit this form.
                    </p>
                </div>
            )}
        </div>
    );
};

const isOnline = useOnline();
<button disabled={!isOnline}>{isOnline ? "Send" : "Offline"}</button>

API Reference

Signature

const isOnline = useOnline();

Returns

Type	Description
`boolean`	`true` if the browser is online, `false` otherwise.

Hook Source Code

import { useState, useCallback } from "react";
import { useEventListener } from "@repo/hooks/dom/use-event-listener";

const isBrowser = typeof window !== "undefined";

/**
 * useOnline - Track network connectivity status
 *
 * @returns boolean indicating if the browser is online
 *
 * @example
 * const isOnline = useOnline();
 */
export function useOnline(): boolean {
    const [isOnline, setIsOnline] = useState(() =>
        isBrowser ? navigator.onLine : true,
    );

    const handleOnline = useCallback(() => setIsOnline(true), []);
    const handleOffline = useCallback(() => setIsOnline(false), []);

    useEventListener("online", handleOnline);
    useEventListener("offline", handleOffline);

    return isOnline;
}

Network Status

Network-Aware Form

On this page