@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*	CommandsProp
prompt	string
welcomeMessage	string
autoFocus	boolean
noCommandFound	(...str: string[]) => Promise
wrapperStyle	React.CSSProperties	styles for wrapper
promptWrapperStyle	React.CSSProperties	styles for promptWrapper
promptStyle	React.CSSProperties	styles for prompt
lineStyle	React.CSSProperties	styles for line
inputStyle	React.CSSProperties	styles for input
wrapperClassName	string	className for wrapper
promptWrapperClassName	string	className for promptWrapper
promptClassName	string	className for prompt
lineClassName	string	className for line
inputClassName	string	className for input
history	string[]	history array
onAddHistoryItem	(entry: string) => void	callback called when a new history entry is created
onSanitizeOutputLine	(line: string) => string	callback called before a new output line is inserted to DOM

*are mandatory

Usage

import React, { Component } from 'react'

import ReactConsole from 'react-console'

const App = () => {
  const [history, setHistory] = useState([
    "echo hello world",
    "sleep 1000",
    "sleep 2000",
    "sleep 3000",
    "echo ola",
    "not found",
  ])

  return (
    <div>
      <ReactConsole
        autoFocus
        welcomeMessage="Welcome"
        commands={{
          history: {
            description: 'History',
            fn: () => new Promise(resolve => {
               resolve(`${history.join('\r\n')}`)
            })
          },
          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>
  )
}
export default App

History implementation

You can provide your own history implementation by providing onAddHistoryItem and history properties. If you don't provide history, up/down arrows & reverse search won't work.

License

MIT © jvorcak