React Terminal UI
A React terminal component with support for light/dark modes. Styling is courtesy of termynal.js.
Check out the Demo π
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, 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 overridden by this value. Defaults to the empty string (""). |
| prompt | The prompt character. Defaults to '$'. |
| height | Height of the terminal. Defaults to 600px. |
| redBtnCallback | Optional callback function for the red button. If provided, the function will be invoked when the red button is clicked. |
| yellowBtnCallback | Optional callback function for the yellow button. If provided, the function will be invoked when the yellow button is clicked. |
| greenBtnCallback | Optional callback function for the green button. If provided, the function will be invoked when the green button is clicked. |
Development
Make sure to run npm run install-peers after npm install so peer dependencies are also installed.
License
Termynal.js is also licensed under MIT, Copyright (C) 2017 Ines Montani.