Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/haensl/preact-component-console
A console emulator for preact.
https://github.com/haensl/preact-component-console
console preact preact-components terminal terminal-emulator typewriter
Last synced: about 2 months ago
JSON representation
A console emulator for preact.
- Host: GitHub
- URL: https://github.com/haensl/preact-component-console
- Owner: haensl
- License: mit
- Created: 2018-05-13T21:28:47.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-07-03T08:45:23.000Z (about 6 years ago)
- Last Synced: 2024-05-06T21:03:51.036Z (2 months ago)
- Topics: console, preact, preact-components, terminal, terminal-emulator, typewriter
- Language: JavaScript
- Homepage:
- Size: 30.8 MB
- Stars: 30
- Watchers: 2
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-preact - Preact Component Console - Console Emulator. Simulates typing via dynamic delays. (Uncategorized / Uncategorized)
- awesome-stars - preact-component-console
README
# preact-component-console
Console emulator preact component. Emulates realistic typing via dynamic char-typing delays.
[](https://nodei.co/npm/preact-component-console/)
[](http://badge.fury.io/js/preact-component-console)
[](https://travis-ci.org/haensl/preact-component-console)
## Quick Start
1. Install the package
via NPM
```bash
npm i --save preact-component-console
```
via yarn
```bash
yarn add preact-component-console
```
2. Use the component
```javascript
import Console from 'preact-component-console';
// ...
render() {
}
```
## Options
### lines `Array | string`
The lines to write.
#### Example
```javascript
```
### console `Object`
Set options on the console component.
#### Signature
```javascript
{
append: false, // whether to append lines
classes: {
element: 'console' // class to set on the root element
},
typing: {
char: { // options concerning typing of individual characters
avgMs: 150, // average duration for typing a char in milliseconds
deviation: 0.3, // average deviation to apply to avgMs
minMs: 50, // minimum duration for typing a char in milliseconds
maxMs: Infinity // maximum duration for typing a char in milliseconds
},
line: { // options concerning typing of a line
delay: { // options concerning the delay between lines
avgMs: 1000, // average delay between to lines in milliseconds
deviation: 0.5, // average deviation to apply to avgMs
minMs: 500, // minimum delay between to lines in milliseconds
maxMs: 1500 // maximum delay between to lines in milliseconds
}
}
}
}
```
#### Example
```javascript
```
### line `Object`
Set options for the line component(s).
#### Signature
```javascript
{
classes: {
element: 'console-line', // class to set on a line component
content: 'console-line-content' // class to set on the line's text content
}
}
```
#### Example
```javascript
```
### ps1 `Object`
Set options for the PS1 component.
#### Signature
```javascript
{
classes: {
element: 'console-ps1', // class to set on a ps1 component
},
content: '$' // string to display as ps1
}
```
### Example
```javascript
```
### cursor `Object`
Set options for the cursor.
#### Signature
```javascript
{
classes: {
blink: 'console-cursor--blink', // class to set on the cursor component when visible (in addition to the class set in element)
element: 'console-cursor', // class to set on a cursor component
write: 'console-cursor--write' // class to set on the cursor component while writing (in additon to the class set in element)
},
intervalMs: 400 // duration between blink cycles in milliseconds
}
```
#### Example
```javascript
```
## [Changelog](CHANGELOG.md)
## [License](LICENSE)