MIT-licensed console emulator in React. Documentation and more advanced features coming soon!
React component that emulates console behaviour
NPM JavaScript Style Guide license-sh badge
npm install --save @webscopeio/react-console
https://webscopeio.github.io/react-console/
| 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
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
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.