react-terminal-plus

react-terminal-plus

🚀 React component that renders and feels like a Terminal 🖥

Features • Installation • Usage • Props • Development • Credits

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

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/HTML tag or callback	null
errorMessage	Message to show when unidentified command executed, can be either a string, JSX/HTML tag or callback	"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
defaultHandler	Default 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

command	description
clear	clears the console
cls	clears the console

In-built shortcuts

shortcut	description
ctrl + c	copy OR cancel running command if there is no selected text
ctrl + v	paste
ctrl + l	clear the console
ctrl + a	moves the cursor to the beginning of the line
ctrl + e	moves the cursor to the end of the line
Home	moves the cursor to the beginning of the line
End	moves the cursor to the end of the line
ctrl + left-arrow	moves the cursor to the backward word
ctrl + right-arrow	moves 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. 💖

Changelog

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