> For the complete documentation index, see [llms.txt](https://docs.whereby.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.whereby.com/reference/react-hooks-reference.md).

# React SDK Reference

The Whereby browser SDK includes React hooks and components which allow integrating a fully custom video experience into your web application.

{% hint style="warning" %}
This is the documentation for version 3x of Whereby's browser-sdk. If you are still on version 2x, please refer to the [legacy documentation here](https://whereby.gitbook.io/legacy-docs). If you are upgrading from version 2x, please see the [migration guide](/whereby-for-web-browser/react-based-browser-sdk/migrate-from-version-2.x-to-3.md).
{% endhint %}

Check out our toolkit helping your designers plan and implement video call experiences

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Video Call UI Kit</td><td></td><td></td><td><a href="https://www.figma.com/community/file/1411023646481069706/video-call-ui-kit-by-whereby">https://www.figma.com/community/file/1411023646481069706/video-call-ui-kit-by-whereby</a></td><td><a href="https://888889433-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLH2UIJDLc2EElQvYUxWX%2Fuploads%2FtDsegpoofcQHez5FdOoZ%2FDocs_landing%402x.jpg?alt=media&amp;token=f2f9bbb0-d9a5-4fb0-8b3a-9b52f09be49b">Docs_landing@2x.jpg</a></td></tr></tbody></table>

## Getting started

### Installation

Install the `@whereby.com/browser-sdk` package from the public [npm registry](https://www.npmjs.com/package/@whereby.com/browser-sdk).

{% tabs %}
{% tab title="npm" %}

```bash
npm install @whereby.com/browser-sdk
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add @whereby.com/browser-sdk
```

{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm add @whereby.com/browser-sdk
```

{% endtab %}
{% endtabs %}

## Quick Start

{% content-ref url="/pages/V0f2EicuA3ay0WktbtUH" %}
[Browser SDK quickstart](/whereby-for-web-browser/react-based-browser-sdk/quick-start.md)
{% endcontent-ref %}

## Available hooks

{% content-ref url="/pages/lFZVOkmKDjatvjJ73nZp" %}
[useRoomConnection](/reference/react-hooks-reference/useroomconnection.md)
{% endcontent-ref %}

{% content-ref url="/pages/qQCrPmO3YprhnACT2uqr" %}
[useLocalMedia](/reference/react-hooks-reference/uselocalmedia.md)
{% endcontent-ref %}

## Available components

{% content-ref url="/pages/IKcS58kC3R86uFILom3u" %}
[WherebyProvider](/reference/react-hooks-reference/wherebyprovider.md)
{% endcontent-ref %}

{% content-ref url="/pages/mi6qgWPgNsMhg1cxfq2D" %}
[VideoView](/reference/react-hooks-reference/videoview.md)
{% endcontent-ref %}

{% content-ref url="/pages/QcsZlPYhpGaBPb6enUwl" %}
[VideoGrid](/reference/react-hooks-reference/videogrid.md)
{% endcontent-ref %}