socket.io-react-hooks-advanced/dist/hooks/useConnectionStatus.js

A modular and extensible React + Socket.IO hook library designed for real-world applications. Supports namespaced sockets, reconnection strategies, offline queues, latency monitoring, middleware, encryption, and more.

import { useContext, useEffect, useState } from "react";
import { SocketContext } from "../context/SocketContext";
export function useConnectionStatus() {
    const { socket } = useContext(SocketContext);
    const [status, setStatus] = useState("connecting");
    useEffect(() => {
        if (!socket)
            return;
        const handleConnect = () => setStatus("connected");
        const handleDisconnect = () => setStatus("disconnected");
        const handleReconnect = () => setStatus("reconnecting");
        const handleConnectError = (err) => {
            if ((err === null || err === void 0 ? void 0 : err.message) === "unauthorized") {
                setStatus("unauthorized");
            }
            else {
                setStatus("failed");
            }
        };
        socket.on("connect", handleConnect);
        socket.on("disconnect", handleDisconnect);
        socket.on("reconnect_attempt", handleReconnect);
        socket.on("connect_error", handleConnectError);
        return () => {
            socket.off("connect", handleConnect);
            socket.off("disconnect", handleDisconnect);
            socket.off("reconnect_attempt", handleReconnect);
            socket.off("connect_error", handleConnectError);
        };
    }, [socket]);
    return status;
}