Terminal in React JS
A component that renders a terminal

Already more than two weeks ago, I created terminal-in-react, a component that renders a terminal in React JS. I wanted to create something interesting with React and then I’d this crazy idea.
How it works ?
The component renders a terminal interface which allows you to add your own commands. For example – let’s add a command that will type the given text automatically.
Don’t worry, we will look into the API later. Let’s see how this command works.

Interesting! Right ? But there is more…
Basic example
In the above example I’ve added three commands, open-google , showmsg and popup . Also I’ve described all the three commands with a description prop.
Display message
Display a message with msg prop when the component mounts.
<Terminal msg="Hello World" />Customisation
To customise the terminal look, you can pass prop color to change the text color, backgroundColor to change the background color and barColor to change the color of bar.

Minimise, Maximise and Close
Yup! Those three buttons actually work 😅

Creating advance commands
You can also add a command that performs some async stuff rather that basic I/O using the advance command api. It has three parameters -
- arguments (input array)
- print (method to write new line)
- runCommand (to call the command)

Using plugins 🔥
We have also developed a plugin system for the <Terminal /> component which helps you develop custom plugins.
One example of the plugin is terminal-in-react-pseudo-file-system-plugin which creates a fake file system.
Let’s see it in action,

Woaah! Awesome!! Let us know if you make something interesting 😃
More features
- Tab autocomplete

- Multi-line input

- Check history of your commands

Keyboard shortcuts
You can also define keyboard shortcuts. They have to be grouped by os. The three available are win, darwin, and linux. You can group multiple os by a `,` for example if the shortcut was for all platforms `win,darwin,linux` would be fine as a key. The value of the shortcut should be a command to run.
OS specific shortcuts
or mix and match
Built-in commands
clear- clears the screenhelp- list all the commandsshow- shows a msg if anyecho- display the input messageedit-line- edits the last line or a given line using the-largument
Current status
We are working on -
- adding workspaces and tabs
- parser (to write basic programs)
- expanding the plugin system
So expect much more features in the next release 😎
Shoutout to Jonathan Gertig and Christian Varisco for their amazing contributions to the project 🎉 . Thank you so much!!
If you want to contribute to the project, here is the contributing guide. I’m excited to see your pull request.
GitHub - https://github.com/nitin42/terminal-in-react
Website - http://terminal-in-react.surge.sh/
