MIT-licensed console emulator in React. Documentation and more advanced features coming soon!
React component that emulates console behaviour
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 |
*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.