terminal-io

This is a terminal for React web apps.

Installation

1- Create a new react app

npx create-react-app my-terminal-project cd my-terminal-project

2- Install terminal-io

npm i terminal-io or yarn add terminal-io

3- Update your body style

/* src/index.css */

body {
  padding: 16px;
  margin: 0;
  background: #211d1b;
}

4- Add terminal-io into your project

update App.js and add these codes

// src/App.js

import "./index.css";
import Terminal from "terminal-io";
import React from "react";

const App = () => {
  const commands = [
    { name: "summary", value: () => <p>This is summary text</p> },
  ];
  return <Terminal commands={commands} />;
};

export default App;

5- Run the project

npm run start or yarn start

6- Go to localhost server

http://localhost:3000/

Events

Event	Description
onEnter	When the user presses the enter
onDidMount	When the component install successfully

Props

Prop	Description
initialData	This data will add the command line automatically when the component loaded
commands	All command list

Demo

https://salihkesepara.com

Realworl example

https://github.com/salihkesepara/salihkeseparacom

License

MIT