Better demo page + fixed prompt alignment

Author: jvorcak

example/src/App.js

@@ -3,35 +3,45 @@ import React, { Component } from 'react'
 import ReactConsole from 'react-console'
 
 export default class App extends Component {
-  render () {
+  render() {
     return (
       <div>
         <ReactConsole
           autoFocus
-          welcomeMessage="Welcome"
+          welcomeMessage="This is a welcome message 🎉🎉🎉"
           commands={{
             echo: {
               description: 'Echo',
               fn: (...args) => {
                 return new Promise((resolve, reject) => {
                   setTimeout(() => {
                     resolve(`${args.join(' ')}`)
-                  }, 2000)
+                  }, 0)
                 })
               }
             },
-            test: {
-              description: 'Test',
-              fn: (...args) => {
+            sleep: {
+              description: 'sleep',
+              fn: (timeout) => {
                 return new Promise((resolve, reject) => {
                   setTimeout(() => {
-                    resolve('Hello world \n\n hello \n')
-                  }, 2000)
+                    resolve('')
+                  }, timeout)
                 })
               }
             }
           }}
         />
+        <table>
+          <tr>
+            <td><code>echo ...args</code></td>
+            <td>Echo</td>
+          </tr>
+          <tr>
+            <td><code>sleep `ms`</code></td>
+            <td>Sleeps for a number of milliseconds</td>
+          </tr>
+        </table>
       </div>
     )
   }

src/index.tsx

@@ -45,6 +45,10 @@ export default class ReactConsole extends React.Component<Props, State> {
     }
   }
 
+  clear = () => {
+    this.setState({output: [], input: ''})
+  };
+
   onSubmit = async (e: any) => {
     const {prompt} = this.props;
     e.preventDefault();
@@ -67,7 +71,7 @@ export default class ReactConsole extends React.Component<Props, State> {
     const [cmd, ...args] = inputString.split(" ");
 
     if(cmd === 'clear') {
-      this.setState({output: [], input: ''})
+      this.clear()
       return
     }
 
@@ -112,7 +116,7 @@ export default class ReactConsole extends React.Component<Props, State> {
           onSubmit={this.onSubmit}
         >
           <div className={styles.promptWrapper}>
-            <span>{prompt}&nbsp;</span>
+            <span className={styles.prompt}>{prompt}&nbsp;</span>
             <input
               disabled={this.state.commandInProgress}
               ref={ref => this.inputRef = ref}

src/styles.css

@@ -25,6 +25,11 @@
   color: white;
 }
 
+.prompt {
+  display: flex;
+  align-items: center;
+}
+
 .input {
   flex: 1;
   background: transparent !important; /* we want to make this transparent whatever happens in the app*/