Cheetah React SDK (#254)

.github/workflows/react-codestyle.yml

@@ -0,0 +1,43 @@
+name: React Codestyle
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ master ]
+    paths:
+      - '**/react/*.js'
+      - '**/react/*.ts'
+      - '**/react/*.jsx'
+      - '**/react/*.tsx'
+      - '.github/workflows/react-codestyle.yml'
+  pull_request:
+    branches: [ master, 'v[0-9]+.[0-9]+' ]
+    paths:
+      - '**/react/*.js'
+      - '**/react/*.ts'
+      - '**/react/*.jsx'
+      - '**/react/*.tsx'
+      - '.github/workflows/react-codestyle.yml'
+
+jobs:
+  check-react-codestyle:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up Node.js LTS
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Pre-build dependencies
+        run: npm install yarn
+
+      - name: Run Binding Linter
+        run: yarn && yarn lint
+        working-directory: binding/react
+
+      - name: Run Demo Linter
+        run: yarn && yarn lint
+        working-directory: demo/react

.github/workflows/react-demos.yml

@@ -0,0 +1,48 @@
+name: React Demos
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ master ]
+    paths:
+      - 'demo/react/**'
+      - '!demo/react/README.md'
+      - '.github/workflows/react-demos.yml'
+  pull_request:
+    branches: [ master, 'v[0-9]+.[0-9]+' ]
+    paths:
+      - 'demo/react/**'
+      - '!demo/react/README.md'
+      - '.github/workflows/react-demos.yml'
+
+defaults:
+  run:
+    working-directory: demo/react
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x, 20.x]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Pre-build dependencies
+        run: npm install yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build English
+        run: yarn build en
+
+      - name: Build Other Language
+        run: yarn build ko

.github/workflows/react.yml

@@ -0,0 +1,57 @@
+name: React
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ master ]
+    paths:
+      - 'binding/react/**'
+      - '!binding/react/README.md'
+      - 'lib/common/**'
+      - 'lib/wasm/**'
+      - 'resources/audio_samples/**'
+      - '.github/workflows/react.yml'
+  pull_request:
+    branches: [ master, 'v[0-9]+.[0-9]+' ]
+    paths:
+      - 'binding/react/**'
+      - '!binding/react/README.md'
+      - 'lib/common/**'
+      - 'lib/wasm/**'
+      - 'resources/audio_samples/**'
+      - '.github/workflows/react.yml'
+
+defaults:
+  run:
+    working-directory: binding/react
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x, 20.x]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Pre-build dependencies
+        run: npm install yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build
+        run: yarn build
+
+      - name: Set up test
+        run: yarn setup-test
+
+      - name: Run test
+        run: yarn test --env ACCESS_KEY=${{secrets.PV_VALID_ACCESS_KEY}}

README.md

@@ -35,7 +35,9 @@ Cheetah is an on-device streaming speech-to-text engine. Cheetah is:
         - [Node.js](#nodejs-demo)
         - [.Net](#net-demo)
         - [Rust](#rust-demo)
-        - [Web](#web-demo)
+        - [Web](#web-demos)
+          - [Vanilla JavaScript and HTML](#vanilla-javascript-and-html)
+          - [React](#react-demo)
     - [SDKs](#sdks)
         - [Python](#python)
         - [C](#c)
@@ -49,6 +51,8 @@ Cheetah is an on-device streaming speech-to-text engine. Cheetah is:
         - [.Net](#net)
         - [Rust](#rust)
         - [Web](#web)
+          - [Vanilla JavaScript and HTML (ES Modules)](#vanilla-javascript-and-html-es-modules)
+          - [React](#react)
     - [Releases](#releases)
 
 ## AccessKey
@@ -235,7 +239,9 @@ Replace `${ACCESS_KEY}` with your Picovoice `AccessKey`.
 
 For more information about Rust demos, go to [demo/rust](./demo/rust).
 
-### Web Demo
+### Web Demos
+
+#### Vanilla JavaScript and HTML
 
 From [demo/web](./demo/web) run the following in the terminal:
 
@@ -253,6 +259,24 @@ npm run start
 
 Open `http://localhost:5000` in your browser to try the demo.
 
+#### React Demo
+
+From [demo/react](demo/react) run the following in the terminal:
+
+```console
+yarn
+yarn start
+```
+
+(or)
+
+```console
+npm install
+npm run start
+```
+
+Open `http://localhost:3000` in your browser to try the demo.
+
 ## SDKs
 
 ### Python
@@ -682,6 +706,8 @@ Replace `${ACCESS_KEY}` with yours obtained from [Picovoice Console](https://con
 
 ### Web
 
+#### Vanilla JavaScript and HTML (ES Modules)
+
 Install the web SDK using yarn:
 
 ```console
@@ -710,7 +736,7 @@ function transcriptCallback(cheetahTranscript: CheetahTranscript) {
 }
 
 function getAudioData(): Int16Array {
-... // function to get audio data
+  // ... function to get audio data
   return new Int16Array();
 }
 
@@ -729,6 +755,57 @@ cheetah.flush(); // runs transcriptionCallback on remaining data.
 
 Replace `${ACCESS_KEY}` with yours obtained from [Picovoice Console](https://console.picovoice.ai/). Finally, when done release the resources using `cheetah.release()`.
 
+#### React
+
+```console
+yarn add @picovoice/cheetah-react @picovoice/web-voice-processor
+```
+
+(or)
+
+```console
+npm install @picovoice/cheetah-react @picovoice/web-voice-processor
+```
+
+```typescript
+import { useCheetah } from "@picovoice/cheetah-react";
+
+function App(props) {
+  const {
+    result,
+    isLoaded,
+    isListening,
+    error,
+    init,
+    start,
+    stop,
+    release,
+  } = useCheetah();
+
+  const initEngine = async () => {
+    await init(
+      "${ACCESS_KEY}",
+      cheetahModel,
+    );
+  };
+
+  const toggleRecord = async () => {
+    if (isListening) {
+      await stop();
+    } else {
+      await start();
+    }
+  };
+
+  useEffect(() => {
+    if (result !== null) {
+      console.log(result.transcript);
+      console.log(result.isComplete);
+    }
+  }, [result])
+}
+```
+
 ## Releases
 
 ### v1.1.0 — August 11th, 2022

binding/react/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}

binding/react/.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+**/rollup.config.js
+.eslintrc.js