Skip to Content
APIReactConnectivityProvider

ConnectivityProvider

Provider component that configures ConnectivityClient and supplies default options to the React tree.

Signature

function ConnectivityProvider(props: ConnectivityProviderProps): ReactElement;

Props

PropTypeRequiredDefaultDescription
childrenReactNode✅—React tree
detectorsDetector[]✅*—Connectivity detection strategies
clientConnectivityClient✅*—Pre-created client instance
gracePeriodMsnumber0Grace period before offline transition (ms)
onJobError(error, job) => void—Called on final job failure
defaultOptionsConnectivityProviderOptions—Global defaults

* Either detectors or client is required (mutually exclusive). Use client when you need full control over the ConnectivityClient instance.

defaultOptions

interface ConnectivityProviderOptions {
  actions?: Partial<ActionOptions>;
  connectivity?: {
    fallback?: ReactNode;
    delayMs?: number;
  };
};

Behavior

  1. First render: getConnectivityClient(options) initializes singleton
  2. useEffect: calls client.start()
  3. Unmount: calls client.stop() (detectors pause, actions/jobs/listeners preserved)
  4. defaultOptions provided to subtree via React Context

Example

<ConnectivityProvider
  detectors={[browserOnlineDetector(), heartbeatDetector({ url: '/api/health' })]}
  gracePeriodMs={3_000}
  onJobError={(error, job) => Sentry.captureException(error)}
  defaultOptions={{
    actions: {
      whenOffline: 'queue',
      retry: { maxAttempts: 3, backoffMs: (n) => n * 1_000 },
    },
    connectivity: {
      fallback: <GlobalOffline />,
      delayMs: 2_000,
    },
  }}
>
  <App />
</ConnectivityProvider>

Without Provider

All hooks reference the singleton directly. Without Provider:

  • defaultOptions won’t apply
  • You must call start() manually

See Without React.

Last updated on
TypesConnectivity