@webscopeio/react-console v1.2.1

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

*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