Speechly React client

The official Speechly client for React apps

Tutorial GitHub

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.

Installation

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

Usage

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>
  );
}

Profile image for ottomatias

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