preact-component-console
Console emulator preact component. Emulates realistic typing via dynamic char-typing delays.
Quick Start
-
Install the package
via NPM
npm i --save preact-component-consolevia yarn
yarn add preact-component-console -
Use the component
; // ... { <Console lines= 'Hi there!' 'How are you today?' /> }
Options
Array<string> | string
lines The lines to write.
Example
<Console lines= 'Hi there!' 'How are you today?' />
Object
console Set options on the console component.
Signature
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: 03 // 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: 05 // 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
<Console console= classes: element: 'my-console' // set console component class to 'my-console' typing= char: avgMs: 200 // set average duration for typing a char to 200ms lines= 'Hi there!' 'How are you today?' />
Object
line Set options for the line component(s).
Signature
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
<Console lines= 'Hi there!' 'How are you today?' line= classes: element: 'line-text' // set the css class name for line text to 'line-text' />
Object
ps1 Set options for the PS1 component.
Signature
classes: element: 'console-ps1' // class to set on a ps1 component content: '$' // string to display as ps1
Example
<Console lines= 'Hi there!' 'How are you today?' ps1= content: "∆" // set the ps1 string to ∆ />
Object
cursor Set options for the cursor.
Signature
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
<Console lines= 'Hi there!' 'How are you today?' cursor= intervalMs: 250 // set interval for cursor blinking to 250ms />