@the_disreputable_doggo/network-simulator

A React component to simulate network conditions (Optimal, 3G, Offline) during development and in staging environments for Pier & Pixel templates. Supports English and Spanish out of the box with automatic HTML lang detection.

Installation

npm install @the_disreputable_doggo/network-simulator

Usage

import NetworkSimulator from '@the_disreputable_doggo/network-simulator';

function App() {
  return (
    <div>
      {/* Works out of the box with auto-detected English or Spanish defaults */}
      <NetworkSimulator />
    </div>
  );
}

Props

All props are optional:

| Prop | Type | Default | Description | |---|---|---|---| | lang | 'en' \| 'es' \| string | document.documentElement.lang or 'en' | Active locale for built-in dictionaries | | title | string | 'Resilient Network' / 'Red Resiliente' | Modal heading title | | optimal | string | 'Optimal' / 'Óptima' | Button label for optimal network mode | | unstable | string | 'Unstable Grid' / 'Red Inestable' | Button label for 3G unstable mode | | offline | string | 'Offline Mode' / 'Modo Sin Conexión' | Button label for offline mode | | metricsLive | string | 'Live Metrics' / 'Métricas en Vivo' | Heading for live metrics section | | metricsLoad | string | 'Load Speed' / 'Velocidad de Carga' | Label for load speed metric | | metricsData | string | 'Data Transferred' / 'Datos Transferidos' | Label for data transferred metric | | reloadMsg | string | 'Reload to feel the difference' / 'Recarga para sentir la diferencia' | Prompt to reload page | | statusOptimal | string | 'Test Network Resilience' / 'Probar Resiliencia de Red' | Status text on floating button (optimal mode) | | statusUnstable | string | 'Simulating 3G Grid' / 'Simulando Red 3G' | Status text on floating button (3G mode) | | statusOffline | string | 'Simulating Offline' / 'Simulando Sin Conexión' | Status text on floating button (offline mode) | | closeLabel | string | 'Close network simulator' / 'Cerrar simulador de red' | Accessible aria-label for close button |

Features

• Provides a floating toggle button to simulate different network scenarios.
• Exposes live metrics for load speed and data transferred.
• Out-of-the-box multilingual support with built-in English and Spanish dictionaries.
• Fully customizable text props for further localization.
• Designed to integrate seamlessly with Pier & Pixel service workers.