Introducing React Terminal: A customizable terminal component for your React applications.
Here's what it provides:
- 🔮 Highly Customizable: Personalize the title bar, prompt, and output to perfectly match your app's design.
- ⌨️ Custom Commands: Define your own commands to perform specific actions within your app.
- ⏳ Async/Await Support: termireact handles asynchronous operations seamlessly, displaying a loader while waiting .
- ⬆️ ⬇️ Command History: Navigate through past commands with ease using the up and down arrow keys.
- #️⃣ JSX Rendering: Integrate JSX elements directly into your terminal output for a richer experience.
- 🌈 Ansi Support: Support for ANSI escape codes to add color and style to your terminal output.
- 🎨 Multiple Themes: Choose from pre-built themes or create your own custom look.
- 📦 Persistence (
IndexedDB
): Save and recall terminal history for a more convenient user experience.
The Project follows a Compound component pattern. You can use the components to build your own terminal. Each Components extends from Either a div
or textarea
(in case of input textarea) element so you can pass the element props to the components.
Install the package:
npm install @envoy1084/react-terminal
# or
yarn add @envoy1084/react-terminal
# or
pnpm add @envoy1084/react-terminal
# or
bun add @envoy1084/react-terminal
Usage:
import {
Terminal,
TerminalInputBox,
TerminalLoader,
TerminalOutput,
TerminalTitleBar,
TerminalWelcomeMessage,
} from '@envoy1084/react-terminal';
const MyComponent = () => {
return (
<Terminal>
<TerminalTitleBar>
<TerminalTitleBar.ActionGroup />
<TerminalTitleBar.Title />
</TerminalTitleBar>
<TerminalWelcomeMessage />
<TerminalOutput />
<TerminalInputBox>
<TerminalInputBox.Prompt />
<TerminalInputBox.TextArea />
</TerminalInputBox>
<TerminalLoader />
</Terminal>
);
};
export default MyComponent;
If you have any ideas on how to improve the project, feel free to contribute! Please read the contributing guidelines before submitting a pull request.
This project is licensed under the MIT License - see the LICENSE