react-terminal-ui

A terminal react component with support for light and dark modes.

Usage no npm install needed!

<script type="module">
  import reactTerminalUi from 'https://cdn.skypack.dev/react-terminal-ui';
</script>

README

CI Jest Code Coverage Report Types TypeScript CodeQL Scan

React Terminal UI

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

Check out the Demo :heart_eyes:

React Terminal UI Demo Dark

React Terminal UI Demo Light

Installation

npm install --save react-terminal-ui

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, LineType } from 'react-terminal-ui';

const TerminalController = (props = {}) => {
  const [terminalLineData, setTerminalLineData] = useState([
    {type: LineType.Output, value: 'Welcome to the React Terminal UI Demo!'},
    {type: LineType.Input, value: 'Some previous input received'},
  ]);
  // 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 }  lineData={ terminalLineData } onInput={ terminalInput => console.log(`New terminal input received: '${ terminalInput }'`) }/>
    </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.
lineData Terminal line data to render. Line type is either Output or Input; Line data with LineType.Input will display with a prompt before the line.
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

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