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