A console emulator for preact.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
index.js
intro.gif
intro.mov
package-lock.json
package.json
preact.config.js

README.md

preact-component-console

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

NPM

npm version Build Status

Intro

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