README
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
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 ' |