Custom Hooks Part-2

In this article, we will continue our discussion about Custom hooks in React.

In the last article, we have discussed about How to Create Custom Hooks in react and how to Reuse the Code. 

There will be many common scenarios which have to be implemented across multiple React Projects. Like for example, assume that you have opened a mobile app from your phone and trying to do some activity. Your mobile network is very Poor or you have lost the Internet connection. Then the app shows us that message you don’t have internet connection. Please check and try again. 

We see this functionality in multiple Mobile Apps. Rather than writing this functionality in every Project, we might want to reuse the same across multiple Projects. 

There are hundreds of such common examples we come across when we are developing multiple Projects. 

 Lets say we have been asked to create a custom React hook using which we will be able to perform speech-to-text conversion. 

After the Hooks have been introduced in React, code reusability has reached altogether a new level. 

so before we start writing your own custom hooks there is a VERY high possibility that someone has already written it and put it on npm. 

There are many Custom hooks available on npm which can be used in our Projects rather than implementing our own one. 

We can visit npmjs.com, we can search for packages like @rehooks/online-status or , react-speech-kit. 

We can install that respective package into our Project and use that hook in our Project straightaway. 

It’s a great way for us and for our team to maximize code reuse and speed up development.

Now lets install one such custom hook from npm into our demo-project, using which we can do speech-to-text conversion.

npm i react-speech-kit

Now lets Open index.js file from our demo-project. 

Import useSpeechRecognition from React-speech-kit.

Lets create one function component and we will name it as App. 

Lets create one state variable in which we will store the text. 

Now we will call useSpeechRecognition  hook. 

The useSpeechRecognition returns an object that contains:

• listen: a function that tells the browser to listen for audio coming from the mic.
• stop: a function that cancels listening for input coming from the mic.

To this useSpeechRecognition  hook, we can pass one object. To that object, we can pass a function to onResult property. This function takes the search to text conversion result as its input, and we can update the text to our state variable. 

Lets return a div container. We will place a text area element in which we will display the converted text. 

Lets add two buttons, one will be used to listen for the speech and the other one will be used to stop listening to the speech.

Lets call this Component and will render that element to the root container. 

Save the changes, navigate to the browser. 

One can see that as we keep speaking that will be displayed as text in the textarea. 

There are many such hooks are available over npm one can make use of. 

Custom Hooks allows us to reuse the stateful logic to the greatest extent.

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import {useSpeechRecognition} from 'react-speech-kit'

function App(){
  const [text,setText]=useState();

  const {listen,stop}=useSpeechRecognition({
    onResult:result=>setText(result)
  });

  return(
    <div>
      <h2>Converting the Speech to Text...</h2>
      <textarea value={text}></textarea>
      <p>
        <button onClick={listen}>Listen</button>
        <button onClick={stop}>Stop</button>
      </p>
    </div>
  )
}

const element=<App></App>

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

Video Reference: