Cree una aplicación de texto a voz usando ReactJS

reaccionar.js:

Pasos para crear gráficos de líneas usando Recharts en React JS:

Paso 1: Crear Proyecto React 

npx create-react-app my-app

Paso 2: Cambie su directorio e ingrese su gráfico de carpeta principal como

cd my-app

La estructura del proyecto es la siguiente: 

Paso 2: Instalación de react-speech-kit con el siguiente comando: 

npm i react-speech-kit

Paso 3: escribir código en App.js : 

import './App.css';
import Speech from './speech';
function App() {
  return (
    <div className="App">
      <Speech/>
    </div>
  );
}
export default App;

 
Paso 4: escribir código en el archivo  Speech.js

import React from "react";
import { useSpeechSynthesis } from "react-speech-kit";
const Speech = () => {
  const [value, setValue] = React.useState("");
  const { speak } = useSpeechSynthesis();
  return (
    <div className="speech">
      <div className="group">
        <h2>Text To Speech Converter Using React Js</h2>
      </div>
      <div className="group">
        <textarea
          rows="10"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        ></textarea>
      </div>
      <div className="group">
        <button onClick={() => speak({ text: value })}>
          Speech
        </button>
      </div>
    </div>
  );
};
export default Speech;

Paso 5: escribir código en App.css

* {
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
.Speech {
   width: 50px;
}
.group {
  margin: 7px 0;
}
textarea {
  width: 100%;
  padding: 5px 10px;
  border: 1px solid rgb(228, 20, 20);
  outline: none;
  border-radius: 3px;
}
button {
  width: 100%;
  display: block;
  padding: 10px 22px;
  color: rgb(10, 10, 10);
  font-weight: bold;
  cursor: pointer;
  outline: none;
  background: rgb(227, 240, 219);;
}
h2 {
  margin-bottom: 10px;
  text-align: center;
}

 
Paso 6: Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.   

npm start

Salida: Abra el navegador y nuestro proyecto se muestra en la URL http://localhost:3000/