Top React Hooks — Scripts, Speech, and States

Image for post
Image for post
Photo by Aaina Sharma on Unsplash

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-script-hook

We can use the react-script-hook library to load scripts that we want to load.

To install it, we run:

or

Then we can use it by writing:

We use the useScript hook with an object as the argument.

src has the URL for the script.

It returns an array with the loading and error states.

The object also accepts an onload property with the callback to call when it’s loaded.

react-speech-kit

The react-speech-kit lets us add speech synthesis to our React app.

To install it, we run:

Then we can use it by writing:

We create a text area that lets us set the value of value .

Then we use the useSpeechSynthesis hook to return the speak function.

It lets us speak whatever is in the value string.

It also comes with the useSpeechRecognition hook to listen recognize speech using the Speech Recognition API built into recent browsers.

We can use it by writing:

We use the useSpeechRecognition hook to let us listen to speech inputted from a microphone.

It takes an object with the onResult property that’s set to a callback.

result has the recognized speech in string form.

The listen function lets us start listening.

The stop function lets us stop listening.

listening indicates whether we’re listening or not.

react-state-patterns

The react-state-patterns package lets us create reusable states that can be used as internal states for multiple components.

To install it, we run:

Then we can use it by writing:

We create a shared state with the useProviders function.

It takes a callback to with the props parameter and returns an object various components we can use in our components to get the state.

Provider lets us get the data that’ll set as the value of props .

We use the useState hook to set the state.

handlers is an object with functions we can call to update the state.

In App , we use the Provider and Consumer let us access the state and handlers to get and set the state respectively.

The functions that we created in the userProviders are accessed in the child of Consumer .

Image for post
Image for post
Photo by Egor Myznik on Unsplash

Conclusion

react-script-hook lets us load scripts in a React app.

react-speech-kit is a useful package for speech synthesis and recognition.

react-state-patterns lets us create reusable states easily.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store