# React SDK Reference

{% 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](https://docs.whereby.com/whereby-for-web-browser/react-based-browser-sdk/migrate-from-version-2.x-to-3).
{% 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://content.gitbook.com/content/LH2UIJDLc2EElQvYUxWX/blobs/rde9xE83I8ECN7VSVK48/Docs_landing@2x.jpg">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="../whereby-for-web-browser/react-based-browser-sdk/quick-start" %}
[quick-start](https://docs.whereby.com/whereby-for-web-browser/react-based-browser-sdk/quick-start)
{% endcontent-ref %}

## Available hooks

{% content-ref url="react-hooks-reference/useroomconnection" %}
[useroomconnection](https://docs.whereby.com/reference/react-hooks-reference/useroomconnection)
{% endcontent-ref %}

{% content-ref url="react-hooks-reference/uselocalmedia" %}
[uselocalmedia](https://docs.whereby.com/reference/react-hooks-reference/uselocalmedia)
{% endcontent-ref %}

## Available components

{% content-ref url="react-hooks-reference/wherebyprovider" %}
[wherebyprovider](https://docs.whereby.com/reference/react-hooks-reference/wherebyprovider)
{% endcontent-ref %}

{% content-ref url="react-hooks-reference/videoview" %}
[videoview](https://docs.whereby.com/reference/react-hooks-reference/videoview)
{% endcontent-ref %}

{% content-ref url="react-hooks-reference/videogrid" %}
[videogrid](https://docs.whereby.com/reference/react-hooks-reference/videogrid)
{% endcontent-ref %}