Speechly React client

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