Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 2 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 (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-21T19:58:33.000Z (6 months ago)
- Last Synced: 2024-10-01T15:39:39.736Z (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: 836 KB
- Stars: 214
- Watchers: 3
- Forks: 33
- Open Issues: 12
-
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 [React](https://github.com/facebook/react) terminal component with support for light/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"-- 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([
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 passed, 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 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
[MIT](https://opensource.org/licenses/MIT)
Termynal.js is also licensed under MIT, Copyright (C) 2017 Ines Montani.