π 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 output. π
- Command history using arrow up and down. βͺ
- Dark theme support. π
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
);
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!" |
command | description |
---|---|
clear | clears the console |
If you found a bug in this library, please file an GitHub issue here.