Network Status Example

Official Documentation

This example shows you how to detect if a user has network connectivity. If the user is offline a toast alert will be displayed at the top of the app.

The useOfflineStatus hook provides a isOffline utility that detects whether or not a user has network connectivity. It uses the navigator browser API. Please see the MDN Navigator Docs for limitations.

Learn more about RADFish examples at the official documentation

Steps

Import the following in the App.jsx file:

import React, { useEffect } from "react";
import { TOAST_CONFIG, TOAST_LIFESPAN, useToast } from "./hooks/useToast";
import { useOfflineStatus } from "@nmfs-radfish/react-radfish";
import { Alert } from "@trussworks/react-uswds";

Within the App component create a useEffect to handle displaying the toast:

useEffect(() => {
  if (isOffline) {
    showToast(TOAST_CONFIG.OFFLINE);
    setTimeout(() => {
      dismissToast();
    }, TOAST_LIFESPAN);
  }
}, [isOffline]);

Steps​

Steps