Terminal in React JS

Nitin Tulswani
Jul 25, 2017 · 3 min read

A component that renders a terminal

Screenshot

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.

Add your own commands

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

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.

Customisation

Minimise, Maximise and Close

Yup! Those three buttons actually work 😅

Min, Max and Close

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)
Advance 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.

Plugin

Let’s see it in action,

File system plugin

Woaah! Awesome!! Let us know if you make something interesting 😃

More features

  • Tab autocomplete
Tab autocomplete
  • Multi-line input
Multi-line input
  • Check history of your commands
Check command history

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.

Keyboard shortcuts

OS specific shortcuts

or mix and match

Built-in commands

  • clear - clears the screen
  • help - list all the commands
  • show - shows a msg if any
  • echo - display the input message
  • edit-line - edits the last line or a given line using the -l argument

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/

Docs - https://github.com/nitin42/terminal-in-react/wiki

Nitin Tulswani

Written by

Focused on context sensitive information | Makes open source tools | Information design | Processing | Hello 👋🏽

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade