Manages a shared NATS WebSocket connection within a React component tree, exposing connection state and client access via context. ## Key Components | Export | Type | Description | |---|---|---| | `NatsProvider` | Component | Establishes and maintains a NATS connection lifecycle; handles connect, reconnect, and teardown | | `useNats` | Hook | Returns `NatsContextValue`; throws if used outside `` | | `useOptionalNats` | Hook | Returns `NatsContextValue | null`; safe to call outside a provider | | `NatsProviderProps` | Interface | Props for `NatsProvider`, including `getWsUrl`, `onBeforeReconnect`, `clientConfig`, `reconnectionBackoff`, and `urlRevision` | | `NatsContextValue` | Interface | `{ client, status, isReady, reconnectionCount }` available to consumers | | `NatsReconnectionBackoff` | Re-export | Backoff configuration type from `shared-connection` | **`urlRevision`** is the primary mechanism to trigger URL re-evaluation (e.g., after an auth state change). Increment or change it to restart the connection lifecycle. ## Usage Example ```typescript import { NatsProvider, useNats } from './nats-provider' function App() { const [revision, setRevision] = React.useState(0) const getWsUrl = () => session ? `wss://nats.example.com?token=${session.token}` : null return ( { await refreshSession() }} reconnectionBackoff={{ initialDelayMs: 500, maxDelayMs: 10_000 }} > ) } function MyComponent() { const { client, status, isReady, reconnectionCount } = useNats() if (!isReady) return

Connecting… ({status})

return

Connected — reconnections: {reconnectionCount}

} ``` **Source:** [`nats-provider.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/nats-provider.tsx)