StreamVideo

The <StreamVideo /> provider makes the client and its state available to all child components and initializes internationalization.

Best Practices

• Create StreamVideoClient once and clean up with disconnectUser() on unmount.
• Place <StreamVideo> at the app root to make the client available everywhere.
• Use tokenProvider for automatic token refresh in production.

General usage

import { useEffect, useState } from "react";
import { StreamVideo, StreamVideoClient } from "@stream-io/video-react-sdk";

export const App = () => {
  const [client, setClient] = useState<StreamVideoClient>();
  useEffect(() => {
    const myClient = new StreamVideoClient({ apiKey, user, tokenProvider });
    setClient(myClient);
    return () => {
      myClient.disconnectUser();
      setClient(undefined);
    };
  }, [apiKey, user, tokenProvider]);

  return (
    <StreamVideo client={client}>
      <MyUI />
    </StreamVideo>
  );
};

Props

client

StreamVideoClient instance propagated to the component's children as a part of StreamVideoContext. Children can access it with useStreamVideoClient() hook.

i18nInstance

The Streami18n instance to use, if undefined is provided, a new instance will be created. For more information, see our Internationalization guide.

language

The language to translate UI labels. For more information, see our Internationalization guide.

translations

Translation dictionaries keyed by language code. They are registered over the SDK's built-in English copy rather than replacing it, so a partial dictionary is safe: any key you omit renders the English written at its call site. For more information, see our Internationalization guide.