npmpackage.info

Gathering detailed insights and metrics for react-dictate-button

react-dictate-button

A button to start dictation using Web Speech API.

2.0.1

MIT

JavaScript

1,273,114 2.9

Installations

npm install react-dictate-button

Pull Requests

Open

4

Total

64

Closed

45

Merged

15

Issues

Open

4

Total

8

Closed

4

Releases

[1.2.2] - 2020-02-27

v1.2.2

Published on 28 Feb 2020

[1.2.1] - 2019-12-04

v1.2.1

Published on 04 Dec 2019

[1.2.0] - 2019-12-03

v1.2.0

Published on 03 Dec 2019

[1.1.3] - 2018-07-19

v1.1.3

Published on 19 Jul 2018

[1.1.2] - 2018-06-29

v1.1.2

Published on 29 Jun 2018

[1.1.1] - 2018-06-29

v1.1.1

Published on 29 Jun 2018

View all 8 releases

Developer

compulim

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

14.17.0

NPM Version

6.14.13 Statistics

25 Stars

68 Commits

1 Forks

2 Watching

6 Branches

2 Contributors

Updated on 02 Aug 2024

Languages

JavaScript (91.14%)

HTML (7.38%)

CSS (1.28%)

Shell (0.21%)

Total Downloads

Cumulative downloads

Total Downloads

1,273,114

Last day

-3.1%

1,484

Compared to previous day

Last week

-5.8%

7,919

Compared to previous week

Last month

14.7%

34,296

Compared to previous month

Last year

33.4%

333,792

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

react-dictate-button

A button to start speech recognition using Web Speech API, with an easy to understand event lifecycle.

Breaking changes

[2.0.0] - 2021-05-15

Requires react@>=16.8.0 and core-js@3
Modifying props while recognition has started will no longer abort recognition immediately, props will be updated in next recognition
SpeechGrammarList is only constructed when grammar props is present
If speechRecognition prop is not present, capability detection is now done through window.mediaDevices.getUserMedia

Demo

Try out this component at github.io/compulim/react-dictate-button.

Background

Reasons why we need to build our own component, instead of using existing packages on NPM:

Most browsers required speech recognition (or WebRTC) to be triggered by a user event (button click)
Bring your own engine for Web Speech API
- Enable speech recognition on unsupported browsers by bridging it with cloud-based service
Support grammar list thru JSpeech Grammar Format
Ability to interrupt recognition
Ability to morph into other elements

How to use

First, install our production version by npm install react-dictate-button. Or our development version by npm install react-dictate-button@master.

1import DictateButton from 'react-dictate-button';
2
3export default () => (
4  <DictateButton
5    className="my-dictate-button"
6    grammar="#JSGF V1.0; grammar districts; public <district> = Tuen Mun | Yuen Long;"
7    lang="en-US"
8    onDictate={this.handleDictate}
9    onProgress={this.handleProgress}
10  >
11    Start/stop
12  </DictateButton>
13);

Props

Name	Type	Default	Description
`className`	`string`	`undefined`	Class name to apply to the button
`disabled`	`boolean`	`false`	`true` to abort ongoing recognition and disable the button, otherwise, `false`
`extra`	`{ [key: string]: any }`	`{}`	Additional properties to set to `SpeechRecognition` before `start`, useful when bringing your own `SpeechRecognition`
`grammar`	`string`	`undefined`	Grammar list in JSGF format
`lang`	`string`	`undefined`	Language to recognize, for example, `'en-US'` or `navigator.language`
`speechGrammarList`	`any`	`window.SpeechGrammarList` (or vendor-prefixed)	Bring your own `SpeechGrammarList`
`speechRecognition`	`any`	`window.SpeechRecognition` (or vendor-prefixed)	Bring your own `SpeechRecognition`

Note: change of extra, grammar, lang, speechGrammarList, and speechRecognition will not take effect until next speech recognition is started.

Events

Name	Signature	Description
`onClick`	(event: MouseEvent) => void	Emit when the user click on the button, `preventDefault` will stop recognition from starting
`onDictate`	({ result: { confidence: number, transcript: number }, type: 'dictate' }) => void	Emit when recognition is completed
`onError`	(event: SpeechRecognitionErrorEvent) => void	Emit when error has occurred or recognition is interrupted, see below
`onProgress`	({ abortable: boolean, results: [{ confidence: number, transcript: number }], type: 'progress' }) => void	Emit for interim results, the array contains every segments of recognized text
`onRawEvent`	(event: SpeechRecognitionEvent) => void	Emit for handling raw events from `SpeechRecognition`

Hooks

Although previous versions exported a React Context, it is recommended to use the hooks interface.

Name	Signature	Description
`useAbortable`	`[boolean]`	If ongoing speech recognition can be aborted, `true`, otherwise, `false`
`useReadyState`	`[number]`	Returns the current state of recognition, refer to this section
`useSupported`	`[boolean]`	If speech recognition is supported, `true`, otherwise, `false`

Checks if speech recognition is supported

To determines whether speech recognition is supported in the browser:

If speechRecognition prop is undefined
- If both window.navigator.mediaDevices and window.navigator.mediaDevices.getUserMedia are falsy, it is not supported
  - Probably the browser is not on a secure HTTP connection
- If both window.SpeechRecognition and vendor-prefixed are falsy, it is not supported
- If recognition failed once with not-allowed error code, it is not supported
Otherwise, it is supported

Even the browser is on an insecure HTTP connection, window.SpeechRecognition (or vendor-prefixed) will continue to be truthy. Instead, mediaDevices.getUserMedia is used for capability detection.

Event lifecycle

One of the design aspect is to make sure events are easy to understand and deterministic. First rule of thumb is to make sure onProgress will lead to either onDictate or onError. Here are some samples of event firing sequence (tested on Chrome 67):

Happy path: speech is recognized
1. onProgress({}) (just started, therefore, no results)
2. onProgress({ results: [] })
3. onDictate({ result: ... })
Heard some sound, but nothing can be recognized
1. onProgress({})
2. onDictate({}) (nothing is recognized, therefore, no result)
Nothing is heard (audio device available but muted)
1. onProgress({})
2. onError({ error: 'no-speech' })
Recognition aborted
1. onProgress({})
2. onProgress({ results: [] })
3. While speech is getting recognized, set props.disabled to false, abort recognition
4. onError({ error: 'aborted' })
Not authorized to use speech or no audio device is availablabortable: truee
1. onError({ error: 'not-allowed' })

Function as a child

Instead of passing child elements, you can pass a function to render different content based on ready state. This is called function as a child.

Ready state	Description
`0`	Not started
`1`	Starting recognition engine, recognition is not ready until it turn to `2`
`2`	Recognizing
`3`	Stopping

For example,

1<DictateButton>
2  {({ readyState }) =>
3    readyState === 0 ? 'Start' : readyState === 1 ? 'Starting...' : readyState === 2 ? 'Listening...' : 'Stopping...'
4  }
5</DictateButton>

Customization thru morphing

You can build your own component by copying our layout code, without messing around the logic code behind the scene. For details, please refer to DictateButton.js, DictateCheckbox.js, and DictationTextbox.js.

Checkbox version

In addition to <button>, we also ship <input type="checkbox"> out of the box. The checkbox version is better suited for toggle button scenario and web accessibility. You can use the following code for the checkbox version.

1import { DictateCheckbox } from 'react-dictate-button';
2
3export default () => (
4  <DictateCheckbox
5    className="my-dictate-checkbox"
6    grammar="#JSGF V1.0; grammar districts; public <district> = Redmond | Bellevue;"
7    lang="en-US"
8    onDictate={this.handleDictate}
9    onProgress={this.handleProgress}
10  >
11    Start/stop
12  </DictateCheckbox>
13);

Textbox with dictate button

We also provide a "textbox with dictate button" version. But instead of shipping a full-fledged control, we make it a minimally-styled control so you can start copying the code and customize it in your own project. The sample code can be found at DictationTextbox.js.

Design considerations

Hide the complexity of Web Speech events because we only want to focus on recognition experience
- Complexity in lifecycle events: onstart, onaudiostart, onsoundstart, onspeechstart
- onresult may not fire in some cases, onnomatch is not fired in Chrome
- To reduce complexity, we want to make sure event firing are either:
  - Happy path: onProgress, then either onDictate or onError
  - Otherwise: onError
"Web Speech" could means speech synthesis, which is out of scope for this package
"Speech Recognition" could means we will expose Web Speech API as-is, which we want to hide details and make it straightforward for recognition scenario

Roadmap

Please feel free to file suggestions.

While readyState is 1 or 3 (transitioning), the underlying speech engine cannot be started/stopped until the state transition is complete
- Need rework on the state management
Instead of putting all logic inside Composer.js, how about
1. Write an adapter to convert SpeechRecognition into another object with simpler event model and readyState
2. Rewrite Composer.js to bridge the new SimpleSpeechRecognition model and React Context
3. Expose SimpleSpeechRecognition so people not on React can still benefit from the simpler event model

Contributions

Like us? Star us.

Want to make it better? File us an issue.

Don't like something you see? Submit a pull request.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 2

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/compulim/react-dictate-button/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/compulim/react-dictate-button/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:81: update your workflow using https://app.stepsecurity.io/secureworkflow/compulim/react-dictate-button/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:88: update your workflow using https://app.stepsecurity.io/secureworkflow/compulim/react-dictate-button/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:101: update your workflow using https://app.stepsecurity.io/secureworkflow/compulim/react-dictate-button/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:106: update your workflow using https://app.stepsecurity.io/secureworkflow/compulim/react-dictate-button/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:130: update your workflow using https://app.stepsecurity.io/secureworkflow/compulim/react-dictate-button/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:141: update your workflow using https://app.stepsecurity.io/secureworkflow/compulim/react-dictate-button/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:152: update your workflow using https://app.stepsecurity.io/secureworkflow/compulim/react-dictate-button/ci.yml/main?enable=pin
Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 1 out of 1 npmCommand dependencies pinned

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

92 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

2.9

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

react-dictate-button

Installations

Pull Requests

4

64

45

15

Issues

4

8

4

Releases

Developer

compulim

Developer Guide

CommonJS

No

14.17.0

6.14.13

Statistics

Languages

Total Downloads

1,273,114

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-dictate-button

Breaking changes

[2.0.0] - 2021-05-15

Demo

Background

How to use

Props

Events

Hooks

Checks if speech recognition is supported

Event lifecycle

Function as a child

Customization thru morphing

Checkbox version

Textbox with dictate button

Design considerations

Roadmap

Contributions

10

10

10

2

0

0

0

0

0

0

0

0

2.9

/10