Big news!Introducing Socket AI - ChatGPT-Powered Threat Analysis. Learn more →
Socket
Log inDemoInstall

react-terminal

Package Overview
Dependencies
2
Maintainers
1
Versions
23
Issues
File Explorer

Advanced tools

react-terminal

React component that renders a terminal

    1.3.1latest
    GitHub

Version published
Maintainers
1
Weekly downloads
702
decreased by-36.01%

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 05 Feb 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • 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