Supported browsers
Please refer to Supported Browsers to learn about compability.The official Speechly client for React apps
Speechly React client uses the power of React Context and React Hooks to make it super easy to integrate Speechly into your app.
Supported browsers
Please refer to Supported Browsers to learn about compability.You can use NPM or Yarn to install the client, here’s how:
# Create a new React app
create-react-app .
# Install Speechly client
npm install --save @speechly/react-client
Using the client is super simple, just import the context provider and a hook, pass the app id and the language and your good to go!
import React from "react";
import { SpeechProvider, useSpeechContext } from "@speechly/react-client";
export default function App() {
return (
<div className="App">
<SpeechProvider appId="my-app-id" language="my-app-language">
<SpeechlyApp />
</SpeechProvider>
</div>
);
}
function SpeechlyApp() {
const { speechState, segment, toggleRecording } = useSpeechContext();
return (
<div>
<div className="status">{speechState}</div>
{segment ? (
<div className="segment">
{segment.words.map((w) => w.value).join(" ")}
</div>
) : null}
<div className="mic-button">
<button onClick={toggleRecording}>Record</button>
</div>
</div>
);
}
Last updated by ottomatias on December 22, 2020 at 12:52 +0200
Found an error on our documentation? Please file an issue or make a pull request
Content