React-terminal-plus NPM

react-terminal-plus

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

yarn add react-terminal-plus

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

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. 💖

node npm react terminal

4 months ago

4 months ago

8 months ago

8 months ago

8 months ago