Skip to content

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

License

Notifications You must be signed in to change notification settings

denis-orbs/react-terminal

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸš€ 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. πŸ”„
  • 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 --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
);

Creating custom themes

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

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

Props

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

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 πŸ–₯

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 81.9%
  • SCSS 14.4%
  • JavaScript 3.7%