diff --git a/examples/network-status/README.md b/examples/network-status/README.md index 6c049f2b..e67c01ae 100644 --- a/examples/network-status/README.md +++ b/examples/network-status/README.md @@ -1,12 +1,13 @@ # Network Status Example -This example shows 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. +This example demonstrates how to detect a user's network connectivity. If the user is offline, the built-in status indicator will display `Offline ❌`. If online, it will show `Online ✅`. The `useOfflineStatus` hook provides an `isOffline` utility that detects the user's network connectivity. It uses the `navigator` browser API. Refer to the [MDN Navigator Docs](https://developer.mozilla.org/en-US/docs/Web/API/Navigator) for limitations. Learn more about RADFish examples at the official [documentation](https://nmfs-radfish.github.io/radfish/developer-documentation/examples-and-templates#examples). Refer to the [RADFish GitHub repo](https://nmfs-radfish.github.io/radfish/) for more information and code samples. ## Preview + This example will render as shown in this screenshot:  @@ -14,22 +15,27 @@ This example will render as shown in this screenshot: ## Steps ### 1. Import Required Dependencies + Import the following libraries in the `App.jsx` file: - ```jsx - 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"; - ``` -### 2. Add useEffect for Toast Notifications -Within the `App` component, create a `useEffect` function to handle displaying the toast: - ```jsx - useEffect(() => { - if (isOffline) { - showToast(TOAST_CONFIG.OFFLINE); - setTimeout(() => { - dismissToast(); - }, TOAST_LIFESPAN); - } - }, [isOffline]); - ``` + +```jsx +import React, { useEffect } from "react"; +import { useOfflineStatus } from "@nmfs-radfish/react-radfish"; +import { Alert } from "@trussworks/react-uswds"; +``` + +### 2. Use `useOfflineStatus` to Access Network State + +Within the `HomePage` component, use `useOfflineStatus` to retrieve the `isOffline` property, which indicates whether the application is currently offline: + +```jsx +const HomePage = () => { +const { isOffline } = useOfflineStatus(); // Retrieve the isOffline state + +return ( +