@marijoo/react-terminal v2.0.2

react-terminal

🖥 React component that renders a Terminal. Heavily based on the package by bony2023.

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 themes and support to create more. 🚀

Installation

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

npm install react-terminal

Usage

import { ReactTerminal } from "react-terminal";

function MyComponent(props) {
  const commands = {
    whoami: "jackharper",
    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, material-light, material-dark, material-ocean and matrix. You can also create custom themes by passing themes parameter in props, as follows:

<ReactTerminal
commands={commands}
themes={{
    my-custom-theme: {
      background: "#272B36",
      color: "#FFFEFC",
      promptColor: "#a917a8",
      fontFamily: "'Source Code Pro', monospace",
      fontSize: "18px",
      lineHeight: "1.5",
      padding: "1em 1.5em",
    }
  }}
theme="my-custom-theme"
/>

Props

In-built commands