@william-blake-whitham/react-terminal NPM

Terminal png

Features

Mobile support. 📱
Customizable commands, prompt and error message. ✅
Support callbacks(async/non-async) for commands. 🔄
Command history using arrow up and down. 🔼
In-built light, dark and dracula theme. 🚀

Installation

Install package with NPM or YARN and add it to your development dependencies:

npm install --save-dev react-terminal

yarn add --dev react-terminal

Usage

import { ReactTerminal } from "react-terminal";

function MyComponent(props) {
  // Define commands here
  const commands = {
    whoami: "HackerMan",
    cd: (directory) => `changed path to ${directory}`
  };

  return (
    <ReactTerminal
      commands={commands}
    />
  );
}

Also make sure to wrap the main mountpoint around the TerminalContextProvider. This retains the state even when the component is unmounted and then mounted back:

import { TerminalContextProvider } from "react-terminal";

ReactDOM.render(
  <TerminalContextProvider>
    <App/>
  </TerminalContextProvider>,
  rootElement
);

Creating custom themes

The component comes with few in-built themes: light, dark and dracula. You can create a custom themes by passing themes parameter in props, as follows:

<ReactTerminal
  commands={commands}
  themes={{
    myCustomTheme: {
      themeBGColor: "#272B36",
      themeToolbarColor: "#DBDBDB",
      themeColor: "#FFFEFC",
      themePromptColor: "#a917a8"
    }
  }}
  theme="myCustomTheme"
/>

Props

name	description	default
theme	Theme of the terminal	"light"
themes	Themes object to supply custom themes	null
showControlButtons	Whether to show the control buttons at the top of the terminal	true
prompt	Terminal prompt	>>>
commands	List of commands to be provided as a key value pair where value can be either a string or callback	null
welcomeMessage	A welcome message to show at the start, before the prompt begins	null
errorMessage	Message to show when unidentified command executed	"not found!"