# StreamVideo

The `<StreamVideo />` provider makes the [client and its state](https://getstream.io/video/docs/react/v2/guides/call-and-participant-state/) available to all child components and initializes [internationalization](https://getstream.io/video/docs/react/v2/guides/localization/).

## 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

```tsx {16}
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`

| Type                |
| ------------------- |
| `StreamVideoClient` |

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

### `i18nInstance`

| Type                        |
| --------------------------- |
| `StreamI18n` \| `undefined` |

The `StreamI18n` instance to use, if `undefined` is provided, a new instance will be created. For more information, see our [Internationalization guide](https://getstream.io/video/docs/react/v2/guides/localization/).

### `language`

| Type                    | Default |
| ----------------------- | ------- |
| `string` \| `undefined` | en      |

The language to translate UI labels. For more information, see our [Internationalization guide](https://getstream.io/video/docs/react/v2/guides/localization/).

### `translationsOverrides`

| Type                             |
| -------------------------------- |
| `TranslationsMap` \| `undefined` |

Custom translations that will be merged with the defaults provided by the library. For more information, see our [Internationalization guide](https://getstream.io/video/docs/react/v2/guides/localization/).

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/v2/ui-components/core/stream-video/](https://getstream.io/video/docs/react/v2/ui-components/core/stream-video/).