oriel v0.2.1

Oriel (Terminal React Component)

Oriel is a browser based command line interface. Oriel supports the custom commands through the creation of command handler. The create command handler is then passed to the Terminal component.

Installation

npm install oriel

OR

yarn add oriel

Prerequisites

Oriel requires react and react-dom

Example

import React, { Component } from "react";
import { render } from "react-dom";
import Terminal from "oriel";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stdout: []
    };

    this.onCommand = this.onCommand.bind(this);
  }

  /**
   * Sample implementation
   */
  onCommand(command) {
    const { text } = command;

    switch (text) {
      case "hello":
        command.result = "Hello, World!";
        this.setState({
          stdout: Terminal.append(this.state.stdout, command)
        });
        break;

      case "time":
        const date = new Date();
        command.result = date.toLocaleTimeString();
        this.setState({
          stdout: Terminal.append(this.state.stdout, command)
        });
        break;

      case "clear":
        this.setState({ stdout: Terminal.clear() });
        break;

      default:
        command.result = `'${command.text}' is not a recognized command.`;
        this.setState({
          stdout: Terminal.append(this.state.stdout, command)
        });
    }
  }

  render() {
    const theme = {
      color: "#33FF33",
      background: "#000000",
      fontFamily: "Ubuntu Mono",
      height: "200px",
      width: "500px"
    };

    return (
      <div className="App">
        <Terminal
          stdout={this.state.stdout}
          onCommand={this.onCommand}
          prefix={"jack > "}
          theme={theme}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

License

This project is licensed under the MIT License - see the LICENSE.md file for details