Skip to content

Commit 64ceff0

Browse files
jonmbakejonmbake
committed
Format Reamde
1 parent d342045 commit 64ceff0

File tree

1 file changed

+23
-23
lines changed

1 file changed

+23
-23
lines changed

‎README.md‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
[![CodeQL Scan](codeql-scan.svg)](https://github.com/jonmbake/react-terminal-ui/security/code-scanning?query=tool%3ACodeQL)
55

66
# React Terminal UI
7-
8-
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).
7+
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).
98

109
Check out the **[Demo](https://jonmbake.github.io/react-terminal-ui/demo/)** :heart_eyes:
1110

@@ -21,52 +20,53 @@ npm install --save react-terminal-ui
2120

2221
## Usage
2322

24-
_React Terminal UI_ is a "dumb component"-- whatever props you pass in, it will render. You usually want to have
25-
a smart, controller component that controls terminal state. For example:
23+
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:
2624

27-
```
28-
import React from 'react';
25+
```jsx
26+
import React, { useState } from 'react';
2927
import Terminal, { ColorMode, TerminalOutput } from 'react-terminal-ui';
3028

3129
const TerminalController = () => {
3230
const [terminalLineData, setTerminalLineData] = useState([
33-
<TerminalOutput>Welcome to the React Terminal UI Demo!</TerminalOutput>
31+
<TerminalOutput>Welcome to the React Terminal UI Demo!</TerminalOutput>,
3432
]);
3533

34+
// Terminal has 100% width by default, so it should usually be wrapped in a container div
3635
return (
3736
<div className="container">
3837
<Terminal
39-
name='React Terminal Usage Example'
38+
name="React Terminal Usage Example"
4039
colorMode={ColorMode.Light}
41-
onInput={terminalInput => console.log(`New terminal input received: '${terminalInput}'`)}
40+
onInput={(terminalInput) =>
41+
console.log(`New terminal input received: '${terminalInput}'`)
42+
}
4243
>
4344
{terminalLineData}
4445
</Terminal>
4546
</div>
4647
);
4748
};
48-
4949
```
5050

5151
## Component Props
5252

53-
| Name | Description |
54-
|------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
55-
| `name` | Name of the terminal. Displays at the top of the rendered component. In the demo, the name is set to React Terminal UI. |
56-
| `colorMode` | Terminal color mode - either Light or Dark. Defaults to Dark. |
57-
| `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. |
58-
| `startingInputValue` | Starting input value. If this prop changes, any user-entered input will be overridden by this value. Defaults to the empty string (""). |
59-
| `prompt` | The prompt character. Defaults to '$'. |
60-
| `height` | Height of the terminal. Defaults to 600px. |
61-
| `redBtnCallback` | Optional callback function for the red button. If provided, the function will be invoked when the red button is clicked. |
62-
| `yellowBtnCallback` | Optional callback function for the yellow button. If provided, the function will be invoked when the yellow button is clicked. |
63-
| `greenBtnCallback` | Optional callback function for the green button. If provided, the function will be invoked when the green button is clicked. |
64-
| `TopButtonsPanel` | Optional - way to control which buttons are displays in top buttons panel. Pass `TopButtonsPanel={()=> null}` to hide top buttons panel. |
53+
| Name | Description |
54+
|----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
55+
| `name` | Name of the terminal. Displays at the top of the rendered component. In the demo, the name is set to React Terminal UI. |
56+
| `colorMode` | Terminal color mode—either Light or Dark. Defaults to Dark. |
57+
| `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. |
58+
| `startingInputValue` | Starting input value. If this prop changes, any user-entered input will be overridden by this value. Defaults to an empty string (`""`). |
59+
| `prompt` | The prompt character. Defaults to `$`. |
60+
| `height` | Height of the terminal. Defaults to `600px`. |
61+
| `redBtnCallback` | Optional callback function for the red button. If provided, the function will be invoked when the red button is clicked. |
62+
| `yellowBtnCallback` | Optional callback function for the yellow button. If provided, the function will be invoked when the yellow button is clicked. |
63+
| `greenBtnCallback` | Optional callback function for the green button. If provided, the function will be invoked when the green button is clicked. |
64+
| `TopButtonsPanel` | Optional - way to control which buttons are displayed in the top buttons panel. Pass `TopButtonsPanel={()=> null}` to hide top buttons panel. |
6565

6666

6767
### Development
6868

69-
Make sure to run `npm run install-peers` after `npm install` so peer dependencies are also installed.
69+
After running `npm install`, ensure that peer dependencies are installed by executing `npm run install-peers`.
7070

7171
## License
7272

0 commit comments

Comments
 (0)