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.

webscopeio / react-console