Code Monkey home page Code Monkey logo

react-terminal's Introduction

react-terminal

React-terminal

Built with ❤︎ by Simon Ma - 中文文档

🚀 A terminal emulator in React

👀Table of contents

🎉Introduction

terminal-intro

Try the demo

React-terminal is a terminal emulator inspired by vue-terminal.

If you are looking for an interactive application that displays information, then React-terminal would be a good choice for you.

Some of cool features of this React component are:

  1. Built-in system commands:ls cd pwd echo etc
  2. You can use tab to automatically complete the command
  3. Command history using arrow up and down
  4. Customizable commands, prompt and label style
  5. Support callbacks(async/non-async) for commands

Some ideas for using React Terminal in your next project:

  • Personal website: Make your personal website or web resume a command-line interface.

  • Demos: Create mock commands in JavaScript for your CLI app, and let users try out commands in their browser with simulated output.

💡Install

npm i react-terminal-app

OR

yarn add react-terminal-app

This package also depends on react so make sure you've already installed it.

✨Usage

import Terminal from 'react-terminal-app'

// refer to: https://github.com/Tomotoes/react-terminal/blob/master/demo/src/commands
import dynamicList from 'command/dynamic'
import staticList from 'command/static'

const cmd = {
  dynamicList,
  staticList
}

const config = {
  prompt: '➜  ~ ',
  version: '1.0.0',
  initialDirectory: 'workspace',
  bootCmd: 'intro'
}

function App() {
   return <Terminal cmd={cmd} config={config} />
}

DataStruct

PropTypes

{
	cmd: PropTypes.shape({
      dynamicList: PropTypes.object,
      staticList: PropTypes.object
    }).isRequired,
 
    config: PropTypes.shape({
      initialDirectory: PropTypes.string,
      prompt: PropTypes.string,
      version: PropTypes.string,
      bootCmd: PropTypes.string
    }),
        
    className: PropTypes.string,
}

Command

Command is an object, used to define message showed in terminal:

interface ICommand {
    time?: string; // time to show time before command body
	type?: string; // label to show a label before command body
	label?: string; // type to set command's type, will set a class to command's label part, there is 7 builtin types: error, success, info, warning, system, black, time
    content?: string; // the main text showed in terminal.
    [propName: string]: any;
}
type command = ICommand | string

Props

className

The class name of the root node, you can customize the style.

Defaults to react-terimnal-app

config

  1. prompt

    The text to show before the prompt.

    Defaults to ➜ ~ .

  2. initialDirectory

    Directory opened by default in the terminal.

    Defaults to src.

  3. version

    The version number of the terminal, you can execute the version command to view.

    Defaults to 1.0.0.

  4. bootCmd

    The name of the command to be executed when the terminal is initialized.

    Defaults to intro.

cmd

  1. dynamicList

    The list of interactive commands.

    {
      commandName: {
      	description: '...',
        run(print, input) {
          // print: a function that allow you to print command to the terminal
          // input: Command parameters currently entered
          // eg: echo HelloWorld, input The value passed in is 'HelloWorld'
          return new Promise((resolve,reject) => {
            // do something
          })
        }
      }
    }

    Example: Define an open command to open the entered URL.

    export default {
      open: {
        description: 'Open a specified url in a new tab.',
        run(print, input) {
          return new Promise((resolve,reject) => {
            if (!input) {
              return reject({ type: 'error', label: 'Error', content: 'a url is required!' })
            }
            if (!input.startsWith('http')) {
              return reject({ type: 'error', label: 'Error', content: 'Please add `http` prefix!' })
            }
            print({ type: 'success', label: 'Success', content: 'Opening' })
            window.open(input, '_blank')
            resolve({ type: 'success', label: 'Done', content: 'Page Opened!' })
          })
        }
      }
    }
  2. staticList

    The list of commands that only show data

    {
      commandName: {
      	description: '...',
        list: [ <command> ]
      }
    }

    Example: Define a skills command to display the skills you master.

      skill: {
        description: 'Return a list of my skills and my rating of them.',
        list: [
          { type: 'success', label: 'A', content: '· JavaScript 99/100' },
          { type: 'success', label: 'A', content: '· Go 90/100' },
          { type: 'success', label: 'A', content: '· Java 80/100' },
          { type: 'success', label: 'A', content: '· Kotlin 80/100' }
       ]}

Built-in command

System commands

  • clear | cls - clears the screen
  • help | ls - list all the commands
  • exit | back - exit the current session
  • pwd - print name of current directory
  • cd - change the current directory
  • version - print the version of current app

Tip commands

  • When jumping to the page - Jumping page...

  • When the command is not found

    command => `Command '${command}' not found`
  • The prompt of the help command - Here is a list of supporting command.

  • When the command is wrong - 'Something went wrong!'

🎨TODO

  1. Add the button click function in the upper left corner of the terminal.
  2. Add more system commands.
  3. Make terminal themes customizable.
  4. Add multi-line input feature.
  5. Add plug-in system support.

🎯Dev

This project was generated with nwb.

git clone https://github.com/Tomotoes/react-terminal
cd react-terminal
yarn install
yarn start

Feel free to open issues or PRs for any problem you may encounter, typos that you see or aspects that are confusing.

Contributions are welcome, open an issue or email me if you have something you want to work on.

💚Reward

If you like React-terminal and it really helps you, please give me a cup of coffee~

paypal: https://paypal.me/tomotoes

支付宝赞助按钮微信赞助按钮

📃License

MIT License © Simon Ma

react-terminal's People

Contributors

tomotoes avatar uvacoder avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.