Wondering what’s next for npm?Check out our public roadmap! »

    react-component-console

    1.3.3 • Public • Published

    react-component-console CircleCI

    A console emulator component for React.

    NPM

    npm version

    Features

    • Highly customizable console emulator
    • Callbacks

    Quick start

    1. Install the react-component-console dependency
    npm i -S react-component-console

    or

    yarn add react-component-console
    1. Use it in your React app
    import Console from 'react-component-console';
    // ...
    
    class MyComponent extends React.Component {
      // ...
    
      render() {
        return (
          <Console lines={[
            'Hi!',
            'How are you today?'
          ]} />
        );
      }
    }
    
    export default MyComponent;

    Customize

    The following properties let you customize component behaviour.

    • lines: The the text to write.
    • callbacks: Supply callbacks for written line(s).
    • console: Customize Console behaviour.
      • append: Whether or not to append lines.
      • typing: Customize how the Console types text.
        • char: Customize how the Console types single characters.
        • line: Customize how the Console handles line breaks.
      • styling/CSS classes: Customize CSS class names to use for the Console component.
    • line: Customize the Line component.
    • ps1: Customize the PS1 component.
    • cursor: Customize the Cursor component.

    Lines lines

    Specify the string or array of strings to write.

    Example

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

    Callbacks

    onFinishWritingLine

    Provide a callback which is called for every line that was written. The callback receives the line as parameter.

    Example
    <Console
      lines={[
        'Hi!',
        'How are you today?'
      ]}
      onFinishWritingLine={
        (line) => {
          console.info('Console has finished writing line', line);
        }
      }
    />

    onFinishWritingLines

    Provide a callback which is called when all lines have been written. The callback receives the lines as parameter.

    Example
    <Console
      lines={[
        'Hi!',
        'How are you today?'
      ]}
      onFinishWritingLines={
        (lines) => {
          console.info('Console has finished writing all lines', line);
        }
      }
    />

    Console console

    The console property lets you customize console behaviour.

    Appending console.append

    Set this property to true to append lines instead of writing them one by one.

    Typing console.typing

    react-component-console features highly cusomizable human-like typing behaviour. The following options let you fine tune typing the way you want.

    console.typing.char

    This object lets you specify typing behaviour concerning a single character. For every character a new delay is calculated depending on the average character delay and a deviation. If you, e.g. specify an average delay of 100ms and a deviation of 0.2 (or 20%), you end up with character typing delays between 80ms and 120ms.

    Signature
    {
      avgMs: 150, // average milliseconds to type a character
      deviation: 0.3, // deviation to apply to avgMs
      minMs: 50, // minimum milliseconds to type a character
      maxMs: Number.MAX_SAFE_INTEGER // maximum milliseconds to type a character
    }
    Example
    <Console
      lines={[
        'Hi!',
        'How are you today?'
      ]}
      console={{
        typing: {
          char: {
            avgMs: 100, // 100 ms average time to write a character
            deviation: 0.2, // deviate typing delay by 20 %
            minMs: 80 // take at least 80ms to write a character
          }
        }
      }}
    />

    console.typing.line

    This object lets you specify details concerning typing of a line. It works analogous to console.typing.char in the sense that you specify the average delay between lines (i.e. how long it takes to hit the return button) and a deviation from this average.

    Signature
    {
      delay: {
        avgMs: 1000, // average delay between lines in milliseconds, i.e. time to hit return
        deviation: 0.3, // deviation to apply to avgMs
        minMs: 50, // minimum delay between lines in milliseconds
        maxMs: Number.MAX_SAFE_INTEGER // maximum delay between lines in milliseconds
    }
    Example
    <Console
      lines={[
        'Hi!',
        'How are you today?'
      ]}
      console={{
        typing: {
          line: {
            avgMs: 600, // 600 ms average delay between lines
            deviation: 0.2, // deviate line delay by 20 %
            minMs: 500 // delay at least by 500ms to between lines
          }
        }
      }}
    />

    Styles/CSS-classes

    The Console component uses standard CSS classes for styles. You can overwrite any styles in your own stylesheets and you can supply your own class names as well.

    console.classes

    Use this object to customize Console component class names.

    Signature
    {
      classes: {
        element: 'Console' // class name assigned to the wrapping element
      }
    }
    Example
    <Console
      lines={[
        'Hi!',
        'How are you today?'
      ]}
      console={{
        classes: {
          element: 'My-Console' // use .My-Console instead of the default .Console class name
        }
      }}
    />

    Line

    The line property lets you customize the Line component used by Console to render lines.

    Styles/CSS-classes

    line.classes

    Use this object to customize class names of the Line component. You can overwrite any styles in your own stylesheets and you can supply your own class names.

    Signature
    {
      classes: {
        element: 'Console-Line', // class name assigned to the Line element
        content: 'Console-Line-content' // class name assigned to the content, i.e. text, rendered in a line
      }
    }
    Example
    <Console
      lines={[
        'Hi!',
        'How are you today?'
      ]}
      line={{
        classes: {
          element: 'My-Line' // use .My-Line instead of the default .Console-Line class name
        }
      }}
    />

    PS1

    The ps1 property lets you customize the PS1 component.

    Styles/CSS classes

    ps1.classes

    Use this object to customize class names of the PS1 component. You can overwrite any styles in your own stylesheets and you can supply your own class names.

    Signature
    {
      classes: {
        element: 'Console-PS1', // class name assigned to the PS1 element
      }
    }
    Example
    <Console
      lines={[
        'Hi!',
        'How are you today?'
      ]}
      ps1={{
        classes: {
          element: 'My-PS1' // use .My-PS1 instead of the default .Console-PS1 class name
        }
      }}
    />

    Content

    ps1.content

    Use this property to customize the PS1 content rendered in the Console.

    Signature
    {
      content: '$' // display a dollar sign as PS1
    }
    Example
    <Console
      lines={[
        'Hi!',
        'How are you today?'
      ]}
      ps1={{
        content: '~' // display a tilde instead of the default dollar sign
      }}
    />

    Cursor

    The cursor property lets you customize the Cursor component rendered in the Console.

    Styles/CSS classes

    cursor.classes

    Use this object to supply your own class names for the Cursor component. You can overwrite any styles in your own stylesheets and you can supply your own class names.

    Signature
    {
      classes: {
        blink: 'Console-Cursor--blink', // class name to assign when the Cursor is blinking
        element: 'Console-Cursor', // class name to assign to the Cursor component
        write: 'Console-Cursor--write' // class name to assign when the Cursor is in writing state
      }
    }
    Example
    <Console
      lines={[
        'Hi!',
        'How are you today?'
      ]}
      cursor={{
        classes: {
          blink: 'My-Console-Cursor--isBlinking', // use this instead of the default for blinking state
          element: 'My-Console-Cursor', // use this instead of the default for the Cursor component
          write: 'My-Console-Cursor--isWriting' // use this instead of the default for writing state
        }
      }}
    />

    Blink interval

    cursor.intervalMs

    Use this property to specify how rapidly the Cursor should blink.

    Signature
    {
      intervalMs: 400 // blink for 400ms on and off
    }
    Example
    <Console
      lines={[
        'Hi!',
        'How are you today?'
      ]}
      cursor={{
        intervalMs: 250 // blink faster then the default 400ms
      }}
    />

    Changelog

    License

    Install

    npm i react-component-console

    DownloadsWeekly Downloads

    94

    Version

    1.3.3

    License

    MIT

    Unpacked Size

    148 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar