Skip to content

webscopeio/react-console

Repository files navigation

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

react-console

React component that emulates console behaviour

NPM JavaScript Style Guide license-sh badge

Install

npm install --save @webscopeio/react-console

Demo

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

Screenshot

Webscope React Console

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