react-hackterm

React hackterm

Hackable terminal emulator in React

Demo link

Milestone

• Hackable Terminal UI
• Terminal prefixing
• Custom commands
• Command flags
• 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