🚀 React component that renders a Terminal 🖥

Features • Installation • Usage • Props • Report a bug

![Terminal png](https://react-terminal.sirv.com/static/terminal-dracula.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 ( ); } ``` 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( , 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: ``` ``` ## 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 | ## Report a bug If you found a bug in this library, please file an GitHub issue [here](https://github.com/bony2023/react-terminal/issues).

	Stars	Issues	Version	Updated	Created
react-terminal	268	16	1.4.4	6 months ago	8 years ago
terminal	20	1	0.1.4	11 years ago	13 years ago
terminal.js	591	15	1.0.11	3 years ago	12 years ago
xterm-for-react			1.0.4	4 years ago	4 years ago

react-terminal vs terminal vs terminal.js vs xterm-for-react

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past