You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP →
Socket
Socket
Sign inDemoInstall

react-terminal-plus

Package Overview
Dependencies
3
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-terminal-plus

A improved version of `react-terminal` - react-terminal-plus


Version published
Weekly downloads
5.8K
decreased by-49.28%
Maintainers
1
Created
Weekly downloads
 

Changelog

Source

0.0.18 (3rd June 2024)

Feature

  • Add End | Home | CTRL + A | CTRL + E shortcuts to move the caret to the end/start of the line
  • Add CTRL + RIGHT_ARROW | CTRL + LEFT_ARROW shortcuts to move the caret to the next/previous word

Readme

Source

react-terminal-plus

🚀 React component that renders and feels like a Terminal 🖥

Features • Installation • Usage • Props • Development • Credits

react-terminal-plus preview

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 through keyboard and browser's context. 📋
  • Cancel running command using Ctrl + C. ⛔
  • In-built themes and support to create more. 🚀
  • Clear the terminal with clear command or using Ctrl + L. 🧹
  • Local storage support for the command history. 💾
  • Full TypeScript support. 🎉

Installation

npm install react-terminal-plus

OR

yarn add react-terminal-plus

OR

pnpm i react-terminal-plus

Usage

import { TerminalContextProvider, ReactTerminal } from "react-terminal-plus";

function App(props) {
	// Define commands here
	const commands = {
		whoami: "jackharper",
		cd: (directory) => `changed path to ${directory}`,
	};

	return (
		<TerminalContextProvider>
			<ReactTerminal commands={commands} />
		</TerminalContextProvider>
	);
}

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
clsclears the console

In-built shortcuts

shortcutdescription
ctrl + ccopy OR cancel running command if there is no selected text
ctrl + vpaste
ctrl + lclear the console
ctrl + amoves the cursor to the beginning of the line
ctrl + emoves the cursor to the end of the line
Homemoves the cursor to the beginning of the line
Endmoves the cursor to the end of the line
ctrl + left-arrowmoves the cursor to the backward word
ctrl + right-arrowmoves the cursor to the forward word

Development

See .github/CONTRIBUTING.md, then .github/DEVELOPMENT.md. Thanks! 💪

Credits

This repository resulted from a react-terminal fork, and as such we would like to thank all its contributors for creating such an amazing piece of OS software. 💖

Keywords

FAQs

Package last updated on 03 Jun 2024

Did you know?

Socket

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
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc