preact-component-console

Console emulator preact component. Emulates realistic typing via dynamic char-typing delays.

Quick Start

1. Install the package

   via NPM

   npm i --save preact-component-console

   via yarn

   yarn add preact-component-console

2. Use the component

import Console from 'preact-component-console';
 
// ...
 
  render() {
    <Console lines={[
      'Hi there!',
      'How are you today?'
    ]} />
  }

Options

lines Array<string> | string

The lines to write.

Example

<Console
  lines={[
    'Hi there!',
    'How are you today?'
  ]}
/>

console Object

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?'
  ]}
/>

line Object

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'
    }
  }}
/>

ps1 Object

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 ∆
  }}
/>

cursor Object

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
  }}
/>

Changelog

License