React-terminal-ui NPM

React Terminal UI

A terminal React component with support for light and dark modes. Styling is courtesy of termynal.js.

Check out the Demo :heart_eyes:

React Terminal UI Demo Dark

React Terminal UI Demo Light

Installation

npm install --save react-terminal-ui

Usage

React Terminal UI is a "dumb component"—it renders whatever props you pass in. Typically, you'll want a controller component to manage the terminal's state. For example:

import React, { useState } from 'react';
import Terminal, { ColorMode, TerminalOutput } from 'react-terminal-ui';

const TerminalController = () => {
  const [terminalLineData, setTerminalLineData] = useState([
    <TerminalOutput>Welcome to the React Terminal UI Demo!</TerminalOutput>,
  ]);

  // Terminal has 100% width by default, so it should usually be wrapped in a container div
  return (
    <div className="container">
      <Terminal
        name="React Terminal Usage Example"
        colorMode={ColorMode.Light}
        onInput={(terminalInput) =>
          console.log(`New terminal input received: '${terminalInput}'`)
        }
      >
        {terminalLineData}
      </Terminal>
    </div>
  );
};

Component Props

Name	Description
`name`	Name of the terminal. Displays at the top of the rendered component. In the demo, the name is set to React Terminal UI.
`colorMode`	Terminal color mode—either Light or Dark. Defaults to Dark.
`onInput`	An optional callback function that is invoked when a user presses enter on the prompt. The function is passed the current prompt input. If the `onInput` prop is not provided, the prompt input line will not display in the terminal.
`startingInputValue`	Starting input value. If this prop changes, any user-entered input will be overridden by this value. Defaults to an empty string (`""`).
`prompt`	The prompt character. Defaults to `$`.
`height`	Height of the terminal. Defaults to `600px`.
`redBtnCallback`	Optional callback function for the red button. If provided, the function will be invoked when the red button is clicked.
`yellowBtnCallback`	Optional callback function for the yellow button. If provided, the function will be invoked when the yellow button is clicked.
`greenBtnCallback`	Optional callback function for the green button. If provided, the function will be invoked when the green button is clicked.
`TopButtonsPanel`	Optional - way to control which buttons are displayed in the top buttons panel. Pass `TopButtonsPanel={()=> null}` to hide top buttons panel.