@webscopeio/react-console

MIT-licensed console emulator in React. Documentation and more advanced features coming soon!

react-console

React component that emulates console behaviour

Install

npm install --save @webscopeio/react-console

Demo

https://webscopeio.github.io/react-console/

Screenshot

Props

Props	Type	Description
commands*	Object
prompt	string
welcomeMessage	string
autoFocus	boolean
noCommandFound	(...str: string[]) => Promise
wrapperStyle	Object	styles for the wrapper
promptStyle	Object	styles for the prompt
inputStyle	Object	styles for the input
wrapperClassName	string	className for the wrapper
promptClassName	string	className for the prompt
inputClassName	string	className for the input

*are mandatory

Usage

import React, { Component } from 'react'

import ReactConsole from 'react-console'

export default class App extends Component {
  render () {
    return (
      <div>
        <ReactConsole
          autoFocus
          welcomeMessage="Welcome"
          commands={{
            echo: {
              description: 'Echo',
              fn: (...args) => {
                return new Promise((resolve, reject) => {
                  setTimeout(() => {
                    resolve(`${args.join(' ')}`)
                  }, 2000)
                })
              }
            },
            test: {
              description: 'Test',
              fn: (...args) => {
                return new Promise((resolve, reject) => {
                  setTimeout(() => {
                    resolve('Hello world \n\n hello \n')
                  }, 2000)
                })
              }
            }
          }}
        />
      </div>
    )
  }
}

License

MIT © jvorcak