Skip to content

💻Simple console emulator in React

License

Notifications You must be signed in to change notification settings

jankoritak/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

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

*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

About

💻Simple console emulator in React

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 65.9%
  • JavaScript 27.5%
  • CSS 4.2%
  • HTML 2.4%