@mantine/hooks/esm/use-network/use-network.mjs

A collection of 50+ hooks for state and UI management

"use client";
import { useWindowEvent } from "../use-window-event/use-window-event.mjs";
import { useCallback, useEffect, useState } from "react";
//#region packages/@mantine/hooks/src/use-network/use-network.ts
function getConnection() {
	if (typeof navigator === "undefined") return {};
	const _navigator = navigator;
	const connection = _navigator.connection || _navigator.mozConnection || _navigator.webkitConnection;
	if (!connection) return {};
	return {
		downlink: connection?.downlink,
		downlinkMax: connection?.downlinkMax,
		effectiveType: connection?.effectiveType,
		rtt: connection?.rtt,
		saveData: connection?.saveData,
		type: connection?.type
	};
}
function useNetwork() {
	const [status, setStatus] = useState({ online: true });
	const handleConnectionChange = useCallback(() => setStatus((current) => ({
		...current,
		...getConnection()
	})), []);
	useWindowEvent("online", () => setStatus({
		online: true,
		...getConnection()
	}));
	useWindowEvent("offline", () => setStatus({
		online: false,
		...getConnection()
	}));
	useEffect(() => {
		const _navigator = navigator;
		if (_navigator.connection) {
			setStatus({
				online: _navigator.onLine,
				...getConnection()
			});
			_navigator.connection.addEventListener("change", handleConnectionChange);
			return () => _navigator.connection.removeEventListener("change", handleConnectionChange);
		}
		if (typeof _navigator.onLine === "boolean") setStatus((current) => ({
			...current,
			online: _navigator.onLine
		}));
	}, []);
	return status;
}
//#endregion
export { useNetwork };

//# sourceMappingURL=use-network.mjs.map