🚀 React component that renders a Terminal 🖥
Features •
Installation •
Usage •
Props •
Report a bug
Features
- Mobile support. 📱
- Customizable commands, prompt and error message. ✅
- Support callbacks for commands output. 😎
- Command history using arrow up and down. ⏪
- Dark theme support. 🚀
Installation
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
Usage
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
);
Props
name | description | default |
---|
theme | Colour theme of the terminal (light/dark) | "light" |
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!" |
Report a bug
If you found a bug in this library, please file an GitHub issue here.