@jojovms/react-offline-toast

React wrapper for @jojovms/offline-toast-core.

Installation

npm install @jojovms/react-offline-toast

Usage

Component (Recommended)

Just drop it in your main App component.

import { OfflineToast } from '@jojovms/react-offline-toast';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <OfflineToast position="center" theme="dark" />
    </div>
  );
}

Hook (Custom UI)

If you want to build your own UI:

import { useNetworkStatus } from '@jojovms/react-offline-toast';

function NetworkBadge() {
  const isOnline = useNetworkStatus();

  return (
    <div style={{ color: isOnline ? 'green' : 'red' }}>
      {isOnline ? 'Online' : 'Offline'}
    </div>
  );
}

Props

The <OfflineToast /> component accepts the same options as the core library:

| Prop | Type | Default | Description | |---|---|---|---| | theme | 'light' \| 'dark' | 'dark' | Visual theme. | | position | string | 'bottom-center' | top-center, bottom-center, top-right, bottom-right, center. | | duration | number | 3000 | Duration (ms) to show success message. |