@shapes-org/react-terminal-ui v1.0.2

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

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.