Socket
Socket
Sign inDemoInstall

react-terminal

Package Overview
Dependencies
10
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-terminal

React component that renders a terminal


Version published
Weekly downloads
4.3K
increased by13.57%
Maintainers
1
Install size
358 kB
Created
Weekly downloads
 

Readme

Source

🚀 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. 🔼
  • Support for copy/paste. 📋
  • 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

OR

yarn add react-terminal

Usage

import { ReactTerminal } from "react-terminal";

function App(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

namedescriptiondefault
welcomeMessageA welcome message to show at the start, before the prompt begins. Value can be either a string or JSXnull
promptTerminal prompt>>>
commandsList of commands to be provided as a key value pair where value can be either a string, JSX/HTML tag or callbacknull
errorMessageMessage to show when unidentified command executed, can be either a string, JSX/HTML tag or callback"not found!"
enableInputWhether to enable user inputtrue
showControlBarWhether to show the top control bartrue
showControlButtonsWhether to show the control buttons at the top bar of the terminaltrue
themeTheme of the terminal"light"
themesThemes object to supply custom themesnull
defaultHandlerDefault handler to be used (if provided) when no commands match. Useful when you don't know list of commands beforehand/want to send them to server for handling.null

In-built commands

commanddescription
clearclears the console

Report a bug

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

Keywords

FAQs

Last updated on 09 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc