Terminal in React JS

Nitin Tulswani — Tue, 25 Jul 2017 15:51:48 +0000

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.

<Terminal
  commands={{
    "type-text": (args, print, runCommand) => {
      const text = args.slice(1).join(' ');
      print('');
      for (let i = 0; i < text.length; i += 1) {
        setTimeout(() => {
          runCommand(`edit-line ${text.slice(0, i + 1)}`);
        }, 100 * i);
      }
    }
  }}
/>

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


import React, { Component } from 'react';
import Terminal from 'terminal-in-react';
import 'terminal-in-react/lib/css/index.css';

class App extends Component {
  showMsg = () => 'Hello World'

  render() {
    return (
      <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }}>
        <Terminal
          color='green'
          backgroundColor='black'
          barColor='black'
          style={{ fontWeight: "bold", fontSize: "1em" }}
          commands={{
            'open-google': () => window.open('google.com', '_blank'),
            showmsg: this.showMsg,
            popup: () => alert('Terminal in React')
          }}
          descriptions={{
            'open-google': 'opens google.com',
            showmsg: 'shows a message',
            alert: 'alert', popup: 'alert'
          }}
          msg='You can write anything here. Example - Hello! My name is Foo and I like Bar.'
        />
      </div>
    );
  }
}

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


<Terminal
  commands={{
    color: {
      method: (args, print, runCommand) => {
        print(`The color is ${args._[0] || args.color}`);
      },
      options: [
        {
          name: 'color',
          description: 'The color the output should be',
          defaultValue: 'white',
        },
      ],
    },
  }}
/>

Using pluginsÂ ðŸ”¥

We have also developed a plugin system for the 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.

<Terminal
  plugins={[
    new PseudoFileSystem(),
  ]}
/>

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.

<Terminal
  shortcuts={{
    'darwin,win,linux': {
      'ctrl + a': 'echo whoo',
    },
  }}
/>

OS specific shortcuts


<Terminal
  shortcuts={{
    'win': {
      'ctrl + a': 'echo hi windows',
    },
    'darwin': {
      'cmd + a': 'echo hi mac'
    },
    'linux': {
      'ctrl + a': 'echo hi linux'
    }
  }}
/>

or mix and match


<Terminal
  shortcuts={{
    'win,linux': {
      'ctrl + b': 'echo we are special',
    },
    'win': {
      'ctrl + a': 'echo hi windows',
    },
    'darwin': {
      'cmd + a': 'echo hi mac'
    },
    'linux': {
      'ctrl + a': 'echo hi linux'
    }
  }}
/>

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

DEV Community: Nitin Tulswani