jay-jlm / react-terminal

πŸš€ React component that renders a Terminal πŸ–₯

Home Page:https://react-terminal.surge.sh/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸš€ React component that renders a Terminal πŸ–₯

Features β€’ Installation β€’ Usage β€’ Props β€’ Report a bug

Terminal png

Features

  • Mobile support. πŸ“±
  • Customizable commands, prompt and error message. βœ…
  • Support callbacks(async/non-async) for commands output. 😎
  • Command history using arrow up and down. βͺ
  • Dark theme support. πŸš€

Installation

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

npm install --save-dev react-terminal

OR

yarn add --dev react-terminal

Usage

import { ReactTerminal } from "react-terminal";

function MyComponent(props) {
  // Define commands here
  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
);

Props

name description default
theme Colour theme of the terminal (light/dark) "light"
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!"

In-built commands

command description
clear clears the console

Report a bug

If you found a bug in this library, please file an GitHub issue here.

About

πŸš€ React component that renders a Terminal πŸ–₯

https://react-terminal.surge.sh/

License:MIT License


Languages

Language:TypeScript 72.1%Language:CSS 24.1%Language:JavaScript 3.8%