https://github.com/tejasq/react-praise

A React binding for Praise.
https://github.com/tejasq/react-praise

react speech-recognition web-speech-api

Last synced: 4 months ago
JSON representation

A React binding for Praise.

• Host: GitHub
• URL: https://github.com/tejasq/react-praise
• Owner: TejasQ
• License: mit
• Created: 2018-06-02T12:35:35.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T09:42:24.000Z (over 3 years ago)
• Last Synced: 2025-03-28T13:44:39.719Z (about 1 year ago)
• Topics: react, speech-recognition, web-speech-api
• Language: TypeScript
• Size: 247 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# react-praise

> Do React things with your voice.

This is a project that binds the (experimental) [voice-invoked function tool, Praise](https://github.com/tejasq/praise), with React, allowing a user to use [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) within [React](https://reactjs.org/). Please keep in mind that this API _is_ experimental and that this tool comes with all of the standard caveats of Praise.

## Getting Started

* `yarn add praise react-praise` to your already existing React app.

## Usage

react-praise gives you a component whose children get the return value of a voice-invoked function. For example, here's how you can display everything a user says.

[![Edit react-praise demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rvr80nr9m)

```jsx

import React from "react";

import { render } from "react-dom";

import Praise from "react-praise";

const myPhrases = {

  "*": phrase => "You said " + phrase

};

const MyAppWithVoice = props => (

  {output => 
{output}
}

);


render(, document.getElementById("root"));

```

### Options

react-praise supports all of the options that [Praise](https://github.com/tejasq/praise) does, but as props; React-style.

## Examples

* [JSConf EU 2018 Slides](https://github.com/tejasq/jsconf-eu-2018-slides) by me.