fix: typewriter

.eslintrc

@@ -38,6 +38,7 @@
     "consistent-return": "off",
     "react/jsx-filename-extension": "off",
     "guard-for-in": "off",
-    "import/no-unresolved": "off"
+    "import/no-unresolved": "off",
+    "no-return-assign": "off"
   }
 }

package.json

@@ -11,7 +11,7 @@
     "react-dom": "^16.6.0",
     "react-scripts": "2.0.5",
     "react-select": "^2.1.1",
-    "react-typewriter": "^0.4.1"
+    "react-typist": "^2.0.4"
   },
   "scripts": {
     "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",

src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Footer, Nav } from 'components';
-import TypeWriter from 'react-typewriter';
+import Typist from 'react-typist';
 import { optionsFirst, optionsSecond, optionsThird } from 'constants/index';
 import Select from 'react-select';
 import classnames from 'classnames';
@@ -51,12 +51,14 @@ class App extends Component {
 
   onSecondChange = (selectedOption) => {
     if (selectedOption.output) {
-      this.setState({
-        secondOption: selectedOption,
-        showThird: false,
-        output: selectedOption.output,
-        usage: selectedOption.usage,
-        thirdOption: null
+      this.setState({ output: '', usage: '' }, () => {
+        this.setState({
+          secondOption: selectedOption,
+          showThird: false,
+          output: selectedOption.output,
+          usage: selectedOption.usage,
+          thirdOption: null
+        });
       });
     } else {
       this.setState({
@@ -70,10 +72,12 @@ class App extends Component {
   };
 
   onThirdChange = (selectedOption) => {
-    this.setState({
-      thirdOption: selectedOption,
-      output: selectedOption.output,
-      usage: selectedOption.usage
+    this.setState({ output: '', usage: '' }, () => {
+      this.setState({
+        thirdOption: selectedOption,
+        output: selectedOption.output,
+        usage: selectedOption.usage
+      });
     });
   };
 
@@ -143,14 +147,27 @@ class App extends Component {
                 <h2 className="board__title  dark-white">Usage</h2>
 
                 <div className="board board--1">
-                  <TypeWriter typing={1}>{usage}</TypeWriter>
+                  <p className="faded">git config --global user.name "Sam Smith"</p>
+                  <p className="faded">git config --global user.name "Sam Smith"</p>
+
+                  <pre>
+                    {usage.length ? (
+                      <Typist avgTypingDelay={50} cursor={{ show: false }}>
+                        {usage}
+                      </Typist>
+                    ) : null}
+                  </pre>
                 </div>
 
                 {output.length ? (
                   <React.Fragment>
                     <h2 className="board__title  dark-white">Output</h2>
                     <div className="board board--2">
-                      <TypeWriter typing={1}>{output}</TypeWriter>
+                      <pre>
+                        <Typist avgTypingDelay={50} cursor={{ show: false }}>
+                          {output}
+                        </Typist>
+                      </pre>
                     </div>
                   </React.Fragment>
                 ) : null}

src/components/nav.js

@@ -16,7 +16,7 @@ class Nav extends React.Component {
     const { selectedOption } = this.state;
     return (
       <nav className="nav">
-        <div className="language">
+        {/* <div className="language">
           <p className="language__title dark-white">Language</p>
           <Select
             className="language__select"
@@ -25,7 +25,7 @@ class Nav extends React.Component {
             value={selectedOption}
             options={options}
           />
-        </div>
+        </div> */}
 
         <div className="toggle">
           <p className="toggle__option toggle__option--left  dark-white">Light Mode</p>