🚀 React component that renders a Terminal 🖥
Features • Installation • Usage • Props • Report a bug
- Mobile support. 📱
- Customizable commands, prompt and error message. ✅
- Support callbacks(async/non-async) for commands. 🔄
- Command history using arrow up and down. 🔼
- In-built light, dark and dracula theme. 🚀
Install package with NPM or YARN and add it to your development dependencies:
npm install --save-dev react-terminal
OR
yarn add --dev react-terminal
import { ReactTerminal } from "react-terminal";
function MyComponent(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
);
The component comes with few in-built themes: light, dark and dracula. You can create a custom themes by passing themes parameter in props, as follows:
<ReactTerminal
commands={commands}
themes={{
myCustomTheme: {
themeBGColor: "#272B36",
themeToolbarColor: "#DBDBDB",
themeColor: "#FFFEFC",
themePromptColor: "#a917a8"
}
}}
theme="myCustomTheme"
/>
| name | description | default |
|---|---|---|
| theme | Theme of the terminal | "light" |
| themes | Themes object to supply custom themes | null |
| showControlButtons | Whether to show the control buttons at the top of the terminal | true |
| prompt | Terminal prompt | >>> |
| commands | List of commands to be provided as a key value pair where value can be either a string or callback | null |
| welcomeMessage | A welcome message to show at the start, before the prompt begins | null |
| errorMessage | Message to show when unidentified command executed | "not found!" |
| command | description |
|---|---|
| clear | clears the console |
If you found a bug in this library, please file an GitHub issue here.