react-simple-terminal-ui

A simple react component to display an interactive terminal. You can define commands yourself, customize the styling and choose between different window frames.

Checkout the Demo

Usage

import { TerminalUi } from 'react-simple-terminal-ui';
import "react-simple-terminal-ui/dist/styles.css"

const commands = [{
  command: "help", print: <div>
      <b>print</b> print something<br />
      <b>alert</b> show an alert<br />
      <br/>
  </div>
},
{ command: "print", print: "Hello world!"},
{ command: "alert", callback: () => alert("this is an alert triggered by a callback.") }]

const initialFeed =  ["Please type help for a list of commands."]

const Example = () => {

    return <TerminalUi
            initialFeed={initialFeed}
            prompt='[visitor@my-desktop]$ '
            commands={commands}
            blinkerChar={"_"}
            frame={"Win98"}
            commandNotFoundMessage={cmd => `Sorry, I can't find '${cmd}'`}
           />
}

Props

TerminalUi

Name | Type | Function | Default | Optional ------------ | ------------- | -------------| ------------- | ------------ commands | Array | Array of commands (see below) | - | style | object | style for the root component | - | ✓ title | string | a title that is shown in the title section of the window frames | prompt/unset | ✓ initialFeed | Array<string|ReactNode> | Initial records that are shown before the first prompt | - | ✓ className | string | className for the root component | - | ✓ recordClassName | string | className for each record component | - | ✓ prompt | string | The prompt string that is shown in the beginning of each new line | "$" | ✓ commandNotFoundMessage | (cmd: string) => string | custom message if the command was not found | (cmd) => command '${cmd}' not found. | ✓ blinkerComponent | ReactNode | define your own blinking-component | - | ✓ blinkerChar | string | the char that blinks (e.g. '_') | - | ✓ frame | "None", "Win98", "MacOs", "GnomeUbuntu" | The window frame that is going to be used | "None" | ✓

Command

Name | Type | Function | Default | Optional ------------ | ------------- | -------------| ------------- | ------------ command | string | the command that needs to be typed in the terminal | print | string | ReactNode | the content that is rendered when the command matches. | ✓ callback | Function | a callback that is executed when the command matches. | ✓

License

MIT © movcmpret