A tiny component that renders a terminal

Terminal in React

A tiny component that renders a terminal

V2.0.0 is out !

Added this 👇

Install

npm install terminal-in-react --save

or if you use yarn

yarn add terminal-in-react

Usage

import React, { Component } from 'react';
import Terminal from 'terminal-in-react';

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

  render() {
    return (
      <div>
        <Terminal
          color="green"
          backgroundColor="black"
          barColor="black"
          style={{ fontWeight: 'bold', fontSize: '1em' }}
          commands={{
            'open-google': () => window.open("https://www.google.com/", "_blank"),
            showmsg: this.showMsg,
            popup: () => alert("Terminal in React")
          }}
          description={{
            '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>
    );
  }
}

Be careful when copying this example because it uses window object ('open-google': () => window.open("https://www.google.com/", "_blank"),) which is only available on the client-side and it will give you an error if you're doing server side rendering.

Working

To add your own command, use prop commands which accepts an object. This objects then maps command name -> command function.

Let's take an example. You want to open a website with a command open-google

<Terminal commands={{ 'open-google': () => window.open("https://www.google.com/", "_blank")}} />

Add a description of your command using prop description.

<Terminal description={{ 'open-google': 'opens google' }} />

You can have the terminal watch console.log/info function and print out

<Terminal watchConsoleLogging />

Customisation

Use

• prop color to change the color of the text.
• prop backgroundColor to change the background.
• prop barColor to change the color of bar.
• prop prompt to change the prompt (>) color.

Thank you so much Jonathan Gertig for this 👇

What's more ?

• will support images, gifs
• animations
• prettifying the console output

Follow me on Twitter @NTulswani for new updates and progress 😄

API

Built-in commands

• clear - Clears the screen
• help - List all the commands
• show - Shows a msg if any

Where to use ?

• Embed it as a toy on your website
• For showcasing
• Explain any of your project using this terminal component
• or just play with it

You want a X feature

Sure! Create an issue for that and I will look into it.

Contributing

Contributing Guide