# Speechly React Client
[](https://www.npmjs.com/package/@speechly/react-client)
[](/LICENSE)
Add voice features to any React app with Speechly React Client. It handles authentication, audio capture, network streaming and connection management with the Speechly [Streaming API](https://docs.speechly.com/reference/streaming-api).
## Documentation
- [Getting started with Speechly](https://docs.speechly.com/basics/getting-started/)
- [Building a React app using Speechly React Client](https://docs.speechly.com/reference/client-libraries/react-client)
- [View example application](https://github.com/speechly/speechly/tree/main/examples/react-client-example)
- [API reference](https://github.com/speechly/speechly/blob/main/libraries/react-client/docs/classes/context.SpeechProvider.md)
## Install
Using npm:
```bash
npm install @speechly/react-client
```
Using yarn:
```bash
yarn add @speechly/react-client
```
## Usage
Wrap your app with the `SpeechProvider` context provider:
```jsx
import { SpeechProvider } from '@speechly/react-client';
// Get your App ID from Speechly Dashboard (https://api.speechly.com/dashboard/)
// or by using Speechly CLI `list` command.
```
Capture browser microphone audio:
```jsx
import { useSpeechContext } from '@speechly/react-client';
function App() {
const { listening, segment, attachMicrophone, start, stop } = useSpeechContext();
// Make sure that you call `attachMicrophone` from a user initiated
// action handler, like a button press.
const handleClick = async () => {
if (listening) {
await stop();
} else {
await attachMicrophone();
await start();
}
};
return (
);
}
```
React to API updates:
```jsx
// Use `segment.isFinal` to check the segment state. When `false`,the segment might
// be updated several times. When `true`, the segment won’t be updated anymore and
// subsequent callbacks within the same audio context refer to the next segment.
useEffect(() => {
if (segment) {
console.log('Tentative segment:', segment)
if (segment.isFinal) {
console.log('Final segment:', segment)
}
}
}, [segment]);
```
## Contributing
- See contribution guide in [CONTRIBUTING.md](https://github.com/speechly/speechly/blob/main/CONTRIBUTING.md).
- Ask questions on [GitHub Discussions](https://github.com/speechly/speechly/discussions)