# React: hooks and components

> @morevoice/react brings MoreVoice calls to React apps: hooks for a call and its live transcript, a talk button and a softphone, built on the @morevoice/web call client.

`@morevoice/react` wraps the browser call client of [`@morevoice/web`](https://docs.morevoice.ai/guides/web-widget/) for React: hooks that hold a call's state and its live transcript, and ready-made components for a talk button and an agent's softphone.

> **Coming soon: React components are coming**
>
> `@morevoice/react` will wrap the browser call client in hooks and components: `useCall()` and `useTranscript()`, a `<TalkButton />` and a `<Softphone />`, with the typed API client. This section lists them from the package once it ships; until then, use the web component below in any React app.

## Use the web widget in React today

`@morevoice/web` works in any React app as it is:

- **The talk button** is a standard custom element: render `<morevoice-talk-button>` with its [attributes](https://docs.morevoice.ai/guides/web-widget/#attributes) after loading the script or importing `@morevoice/web/define` once, set `metadata` or `auth` on it through a ref, and listen to its `morevoice-…` events with `addEventListener` in an effect.
- **Your own UI** creates a `MoreVoiceCall` in an effect, subscribes to its [events](https://docs.morevoice.ai/guides/web-widget/#build-your-own-call-ui) into state, and calls `destroy()` in the effect's cleanup, so leaving the page never leaves a microphone open.

Calls placed from the browser are authorised as described in [who may call](https://docs.morevoice.ai/guides/web-widget/#who-may-call).