https://github.com/webscopeio/react-console
💻 Simple console emulator in React
https://github.com/webscopeio/react-console
Last synced: 4 months ago
JSON representation
💻 Simple console emulator in React
- Host: GitHub
- URL: https://github.com/webscopeio/react-console
- Owner: webscopeio
- License: mit
- Created: 2018-11-23T20:18:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-29T22:30:26.000Z (about 3 years ago)
- Last Synced: 2025-08-09T00:11:13.822Z (10 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.79 MB
- Stars: 40
- Watchers: 3
- Forks: 9
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
MIT-licensed console emulator in React. Documentation and more advanced features coming soon!
# react-console
> React component that emulates console behaviour
[](https://www.npmjs.com/package/react-console)
[](https://standardjs.com)
## Install
```bash
npm install --save @webscopeio/react-console
```
## Demo
https://webscopeio.github.io/react-console/
## Screenshot
## 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
```tsx
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 (
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)
})
}
}
}}
/>
)
}
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](https://opensource.org/licenses/MIT) © [jvorcak](https://github.com/jvorcak)