https://github.com/jonmbake/react-terminal-ui
A terminal React component with support for light and dark modes.
https://github.com/jonmbake/react-terminal-ui
dark-mode design javascript light-mode react react-component reactjs terminal
Last synced: 3 months ago
JSON representation
A terminal React component with support for light and dark modes.
- Host: GitHub
- URL: https://github.com/jonmbake/react-terminal-ui
- Owner: jonmbake
- License: mit
- Created: 2020-07-17T13:48:43.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-25T13:45:30.000Z (5 months ago)
- Last Synced: 2025-03-26T05:06:38.371Z (3 months ago)
- Topics: dark-mode, design, javascript, light-mode, react, react-component, reactjs, terminal
- Language: TypeScript
- Homepage: https://jonmbake.github.io/react-terminal-ui/demo/
- Size: 749 KB
- Stars: 238
- Watchers: 2
- Forks: 36
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-ccamel - jonmbake/react-terminal-ui - A terminal React component with support for light and dark modes. (TypeScript)
README
[](https://github.com/jonmbake/react-terminal-ui/actions?query=workflow%3ACI)
[](https://jonmbake.github.io/react-terminal-ui/coverage/)
[](https://github.com/jonmbake/react-terminal-ui/blob/gh-pages/index.d.ts)
[](https://github.com/jonmbake/react-terminal-ui/security/code-scanning?query=tool%3ACodeQL)# React Terminal UI
A terminal [React](https://github.com/facebook/react) component with support for light and dark modes. Styling is courtesy of [termynal.js](https://github.com/ines/termynal).Check out the **[Demo](https://jonmbake.github.io/react-terminal-ui/demo/)** :heart_eyes:


## Installation
```
npm install --save react-terminal-ui
```## Usage
React Terminal UI is a "dumb component"—it renders whatever props you pass in. Typically, you'll want a controller component to manage the terminal's state. For example:
```jsx
import React, { useState } from 'react';
import Terminal, { ColorMode, TerminalOutput } from 'react-terminal-ui';const TerminalController = () => {
const [terminalLineData, setTerminalLineData] = useState([
Welcome to the React Terminal UI Demo!,
]);// Terminal has 100% width by default, so it should usually be wrapped in a container div
return (
console.log(`New terminal input received: '${terminalInput}'`)
}
>
{terminalLineData}
);
};
```## 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` | An optional callback function that is invoked when a user presses enter on the prompt. The function is passed the current prompt input. If the `onInput` prop is not provided, the prompt input line will not display in the terminal. |
| `startingInputValue` | Starting input value. If this prop changes, any user-entered input will be overridden by this value. Defaults to an 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. |
| `TopButtonsPanel` | Optional - way to control which buttons are displayed in the top buttons panel. Pass `TopButtonsPanel={()=> null}` to hide top buttons panel. |### Development
After running `npm install`, ensure that peer dependencies are installed by executing `npm run install-peers`.
## License
[MIT](https://opensource.org/licenses/MIT)
Termynal.js is also licensed under MIT, Copyright (C) 2017 Ines Montani.