make text editable

Author: gazdagergo

package.json

@@ -1,11 +1,9 @@
 {
-  "name": "react",
+  "name": "text-to-speech",
   "version": "1.0.0",
-  "description": "React example starter project",
-  "keywords": [
-    "react",
-    "starter"
-  ],
+  "description": "React text to speech example",
+  "licence": "MIT",
+  "keywords": ["react", "starter"],
   "main": "src/index.js",
   "dependencies": {
     "react": "17.0.0",
@@ -22,10 +20,5 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
-}
+  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+}

src/App.js

@@ -1,12 +1,23 @@
-import React from "react";
+import React, { useState } from "react";
 import Speech from "./speech";
 import "./styles.css";
 
 export default function App() {
+  const [text, setText] = useState("Jónapot kívánok");
   return (
     <div className="App">
-      <h1>Text to speech próba</h1>
-      <Speech lang="hu-HU" text="Jónapot kívánok" pause resume />
+      <h1>Szövegből beszéd</h1>
+      <textarea
+        onChange={({ target: { value } }) => setText(value)}
+        style={{ width: "50%", minHeight: 100 }}
+        value={text}
+      />
+      <br />
+      <br />
+      <Speech lang="hu-HU" text={text} pause resume />
+      <br />
+      <br />
+      <p style={{ fontSize: 11 }}>[email protected]</p>
     </div>
   );
 }

src/speech.js

@@ -20,7 +20,6 @@ export default class Speech extends Component {
   }
 
   componentDidMount() {
-    console.log(style);
     this.setButtonState("all", "none", "none", "none");
   }