React Client

Use this page if your application is built with React and you want a simple way to load Sudden once and access it from components.

The React bindings live in the same package as the JavaScript client:


npm install @sudden-network/sudden


pnpm add @sudden-network/sudden


yarn add @sudden-network/sudden


bun add @sudden-network/sudden

`SuddenProvider`

SuddenProvider loads Sudden, tries to initialize it with your config, and makes the Sudden client available to its children.


import React from "react";
 
import { SuddenProvider } from "@sudden-network/sudden/react";
 
const suddenConfig = {
  clientId: "YOUR_CLIENT_ID",
  serviceWorkerPath: "/sudden.service-worker.js",
};
 
export const App = () => (
  <SuddenProvider config={suddenConfig}>{/* your app */}</SuddenProvider>
);

Place SuddenProvider near the root of your app so that any component can access the client.

You do not need to call loadSudden yourself when using SuddenProvider. It loads the script and tries to initialize Sudden for you. If you omit serviceWorkerPath from the config, Sudden will not register a service worker automatically and you are expected to integrate Sudden into your existing worker instead. See the Service worker page for details.

`useSudden`

useSudden returns the Sudden client from React context.


import React, { useEffect } from "react";
 
import { useSudden } from "@sudden-network/sudden/react";
 
export const VideoTelemetry = () => {
  const sudden = useSudden();
 
  useEffect(() => {
    if (!sudden?.isSupported()) return;
 
    console.log("Sudden is supported in this browser");
 
    const off = sudden.on("peerConnected", (data) => {
      console.log("Peer connected", data.peerId);
    });
 
    return () => {
      off();
    };
  }, [sudden]);
 
  return null;
};

If Sudden is not yet loaded, useSudden returns null. Once it returns a client, your components can interact with Sudden.

Always use useSudden inside SuddenProvider. Calling it outside the provider will throw an error.