react-network-status-ts
Version:
React hook and component to detect and display online/offline network status.
16 lines (15 loc) • 755 B
JavaScript
import React from "react";
import { useNetworkStatus } from "../hooks/userNetworkStatus";
export const NetworkStatusBanner = ({ onlineText = "You're back online.", offlineText = "You're offline. Check your internet connection.", className = "", style = {}, showOnlyWhenOffline = true, }) => {
const isOnline = useNetworkStatus();
if (showOnlyWhenOffline && isOnline)
return null;
return (React.createElement("div", { className: className, style: {
backgroundColor: isOnline ? "#d4edda" : "#f8d7da",
color: isOnline ? "#155724" : "#721c24",
padding: "10px",
textAlign: "center",
fontWeight: "bold",
...style,
} }, isOnline ? onlineText : offlineText));
};