Skip to content

A highly customizable terminal component for your React applications.

License

Notifications You must be signed in to change notification settings

Envoy-VC/react-terminal

Repository files navigation

Lens SDK logo

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.

Getting Started

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;

Contributing

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.

License

This project is licensed under the MIT License - see the LICENSE