React Terminal UI

A React terminal component with support for light/dark modes. Styling courtesy of termynal.js.

Check out the Demo :heart_eyes:

Installation

npm install --save react-terminal-ui

Usage

Important Note: In version 1, the component API changed from passing lineData as a prop to line data being defined as children. Check out v.0.2.1 Readme for the old usage.

React Terminal UI is a "dumb component"-- whatever props you pass in, it will render. You usually want to have a smart, controller component that controls terminal state. For example:

import React from 'react';
import Terminal, { ColorMode, TerminalOutput } from 'react-terminal-ui';

const TerminalController = (props = {}) => {
  const [terminalLineData, setTerminalLineData] = useState([
    <TerminalOutput>Welcome to the React Terminal UI Demo!</TerminalOutput>
  ]);
  // Terminal has 100% width by default so it should usually be wrapped in a container div
  return (
    <div className="container">
      <Terminal name='React Terminal Usage Example' colorMode={ ColorMode.Light }  onInput={ terminalInput => console.log(`New terminal input received: '${ terminalInput }'`) }>
        { terminalLineData }
      </Terminal>
    </div>
  )
});

Component Props

| Name | Description | | ------------------- | ------------- | | name | Name of the terminal. Displays at the top of the rendered component. In the demo, the name is set to React Terminal UI | | colorMode | Terminal color mode-- either Light or Dark. Defaults to Dark. | | onInput | A callback function that is invoked when a user presses enter on the prompt. The function is passed the current prompt input. | | startingInputValue | Starting input value. If this prop changes, any user entered input will be overriden by this value. Defaults to the empty string (""). | | prompt | The prompt character. Defaults to '$' |

Development

Make sure to run npm run install-peers after npm install so peer dependencies are also installed.

License

MIT

Termynal.js is also licensed under MIT, Copyright (C) 2017 Ines Montani.