Top AI Repos — open-source AI, indexed and scored
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
💬Speech recognition for your React app
| Date | Stars |
|---|---|
| 2026-07-24 | 842 |
| 2026-07-25 | 842 |
| 2026-07-28 | 842 |
| 2026-07-30 | 842 |
| 2026-07-31 | 842 |
| 2026-08-06 | 842 |
Today
— stars today
This week
— stars this week
This month
— stars this month
Momentum
0.0
growth rate 0.00%/day
# react-speech-recognition
A React hook that converts speech from the microphone to text and makes it available to your React components.
[](https://www.npmjs.com/package/react-speech-recognition)
[](https://www.npmjs.com/package/react-speech-recognition)
[](https://opensource.org/licenses/MIT)
[](https://coveralls.io/github/JamesBrill/react-speech-recognition?branch=master)
## How it works
`useSpeechRecognition` is a React hook that gives a component access to a transcript of speech picked up from the user's microphone.
`SpeechRecognition` manages the global state of the Web Speech API, exposing functions to turn the microphone on and off.
Under the hood,
it uses [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition). Note that browser support for this API is currently limited, with Chrome having the best experience - see [supported browsers](#supported-browsers) for more information.
This version requires React 16.8 so that React hooks can be used. If you're used to version 2.x of `react-speech-recognition` or want to use an older version of React, you can see the old README [here](https://github.com/JamesBrill/react-speech-recognition/tree/v2.1.4). If you want to migrate to version 3.x, see the migration guide [here](docs/V3-MIGRATION.md).
## Useful links
* [Basic example](#basic-example)
* [Why you should use a polyfill with this library](#why-you-should-use-a-polyfill-with-this-library)
* [Cross-browser example](#cross-browser-example)
* [Supported browsers](#supported-browsers)
* [Polyfills](docs/POLYFILLS.md)
* [API docs](docs/API.md)
* [Troubleshooting](#troubleshooting)
* [Version 3 migration guide](docs/V3-MIGRATION.md)
* [TypeScript declaration file in DefinitelyTyped](https://github.com/OleksandrYehorov/DefinitelyTyped/blob/master/types/react-speech-recognition/index.d.ts)
## Installation
To install:
```shell
npm install --save react-speech-recognition
```
To import in your React code:
```js
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'
```
## Basic example
The most basic example of a component using this hook would be:
```jsx
import React from 'react';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
const Dictaphone = () => {
const {
transcript,
listening,
resetTranscript,
browserSupportsSpeechRecognition
} = useSpeechRecognition();
if (!browserSupportsSpeechRecognition) {
return <span>Browser doesn't support speech recognition.</span>;
}
return (
<div>
<p>Microphone: {listening ? 'on' : 'off'}</p>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={resetTranscript}>Reset</button>
<p>{transcript}</p>
</div>
);
};
export default Dictaphone;
```
You can see more examples in the example React app attached to this repo. See [Developing](#developing).
## Why you should use a polyfill with this library
By default, speech recognition is not supported in all browsers, with the best native experience being available on desktop Chrome. To avoid the limitations of native browser speech recognition, it's recommended that you combine `react-speech-recognition` with a [speech recognition polyfill](docs/POLYFILLS.md). Why? Here's a comparison with and without polyfills:
* ✅ With a polyfill, your web app will be voice-enabled on all modern browsers (except Internet Explorer)
* ❌ Without a polyfill, your web app will only be voice-enabled on the browsers listed [here](#supported-browsers)
* ✅ With a polExcerpt of 18,926 characters
Read on GitHub
329
11
8
2
2
1
1
1
1
1
Would you bet a product on this? Bounded 0–100 and slow moving.
matched fp:e16539dd8957f87c, topic:speech-recognition, topic:speech-to-text, name:speech recognition