React hackterm

Hackable terminal emulator in React

Demo link

Milestone

• [x] Hackable Terminal UI
• [x] Terminal prefixing
• [x] Custom commands
• [ ] Command flags
• [x] Theming
• [ ] Command history

Installation

//use npm
$ npm i react-hackterm

//use yarn
$ yarn add react-term

Themes

Available theme: default, github, grass, ocean and pure.

Usage

import React from "react";
import ReactDOM from "react-dom";
import Terminal from "react-hackterm";

function App() {
  return (
    <div className="App">
      <Terminal
        config={{
          mode: "root",
          modeText: "example.com",
          width: 500,
          height: 300,
          edge: true,
          font: "monospace",
          text: 14
        }}
        theme="pure"
        bar="macos"
        command={[
          {
            name: "whoami",
            description: "Get package name",
            value: "react-hackterm"
          },
          {
            name: "pwd",
            description: "Print working directory",
            value: "/User/remote/guest/"
          }
        ]}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Inbuilt command

| Commands | Value | | -------- | ---------------------------------- | | help | Show available commands | | info | About terminal | | date | Get current date | | repo | Reach hackable terminal repository | | clear | Show clear history |

Properties

| Property | Value | Type | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------ | | config | {mode: "root",modeText: "example.com",width: 500,height: 300,edge: true,font: "monospace",text: 14} | object | | commands | [{name: "repo",description: "Get repo", value: "https://github.com/"}] | array | | theme | default, github, grass, ocean or pure. | string | | bar | windows, macos or ubuntu | string |