https://github.com/lpan/rebash
React terminal emulator component
https://github.com/lpan/rebash
bash component emulator react terminal
Last synced: 2 months ago
JSON representation
React terminal emulator component
- Host: GitHub
- URL: https://github.com/lpan/rebash
- Owner: lpan
- License: mit
- Created: 2016-08-05T14:14:48.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-02-03T19:13:56.000Z (over 9 years ago)
- Last Synced: 2025-08-21T00:26:40.407Z (10 months ago)
- Topics: bash, component, emulator, react, terminal
- Language: JavaScript
- Homepage: http://lpan.github.io/rebash/
- Size: 135 KB
- Stars: 13
- Watchers: 0
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [Rebash](http://lpan.io/rebash/)
Terminal emulator component for React!
[](https://github.com/lpan/rebash/blob/master/LICENSE)
[](https://www.npmjs.com/package/rebash)
## Installation and Usage
```
npm install --save rebash
```
## Developer Setup
```bash
git clone https://github.com/lpan/rebash
cd rebash
npm install
npm start # server will listen on localhost:8080
```
## Include the Component
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Terminal from 'rebash';
const files = {
'/home/lawrence/test.txt': 'I am a test',
};
const directories = [
'/etc/',
];
const initialPath = ['/home/goose'];
const commands = {
'open-window': args => { alert(args.targets[0]); },
'ghetto-cowsay': args => `cow says: "${args.targets[0]}"`,
};
const MyTerminal = () => (
,
document.getElementById('root')
);
export default MyTerminal;
```
## API
### Props
#### username:
- description: Unix username to display on the terminal.
- type: `String`
- default: `root`
- eg: `lawrence`
#### directories:
- description: A list of directories represented by their absolute paths
- type: `Array of Strings`
- default: `[]`
- eg: `['/home', '/etc/nginx/']`
#### files
- description: Map used to look up files. `{'/absolute/path': 'file content'}`
- type: `Map of Strings`
- default: `{}`
- eg: `{'/home/goose.txt': 'Mr. Goose is life', '/lmao.txt': null}`
#### initialPath
- description: Initial path when the `Terminal` is rendered
- type: `String`
- default: `/`
- eg: `'/home/lawrence'`
#### commands
- description: A list of custom commands.
- type: `Map of Functions`
- default: `{}`
- eg: `{'say-hello': ({targets}) => 'hello ' + targets[0]}`
See
[Custom commands](https://github.com/lpan/rebash#custom-commands) for more information.
### Custom commands
Before you begin, you may want to take a look at
[src/commands/index.js](src/commands/index.js) for all the built-in commands and
how they are implemented.
A `command` is a JavaScript function that takes **2 parameters**, namely `args` and
`self`.
A typical command will look like this:
```javascript
const clearThenSayHello = (args, self) => {
self.setState({ visibles: [] });
return `Hello ${args.targets[0]}`;
};
const commads = { 'clear-hello': clearThenSayHello };
// then we pass commands as a prop to the Terminal component
```
#### args
An object consists of three fields: `targets`, `flags` and `fulls`.
When `clear-hello -b -dc --all myDir yourDir` is entered, the Rebash argument
parser will produce the following object and pass it to the command function as
`args`.
```javascript
{
targets: ['myDir', 'yourDir'],
flags: ['b', 'c', 'd'],
fulls: ['all'],
}
```
See [src/utils/parseArgs.js](src/utils/parseArgs.js) for more information
#### self
You do not want to mess with `self` unless you want to mutate the internal state
of Rebash. In fact, `self` is just a reference to the instance of the
top level React Component. You can access the component state from `self.state`,
mutate the state and trigger the component to rerender with `self.setState`,
etc.
see [src/Terminal.js](src/Terminal.js) for more information.
#### Print something out
To print out some text, you can either return a string, or throw an error. The
`clear-hello` command shown above will print `hello Lawrence` if I type `clear-hello
lawrence`.