README
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-console
via yarn
yarn add preact-component-console
Use the component
import Console from 'preact-component-console';
// ...
render() {
<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: 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
<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: '