Terminal Text Component

Component for text typing animation.

Installation

npm i @simpozio/terminal-text

Usage

Timeline

Timeline will render its items one by one in order defined by showOn and hideOn properties of items.

import {Timeline, EFFECT} from '@simpozio/terminal-text';
import {ItemComponent} from './your-custom-item-component';
import {css} from 'styled-components';

const fadeAnimation = keyframes`
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
`;

const fade = css`${fadeAnimation} infinite 0.5s`;

function Component() {
  const TimelineItems = [
    {
      showOn: 1,
      hideOn: 2,
      render: () => 'Simple text example',
      delay: 1000
    },
    {
      showOn: 2,
      hideOn: 3,
      type: 'delay',
      delay: 2000
    }
    {
      showOn: 3,
      hideOn: 4,
      effect: fade,
      render: ItemComponent,
      goNext: false,
      onTypingDone: () => console.log('Timeline finished')
    },
    {
      showOn: 4,
      type: 'row',
      render: (items) => <div className="wrapper">{ items }</div>,
      items: [
        {
          render: () => 'Simple'
        },
        {
          showOn: 5,
          hideOn: 6,
          effect: EFFECT.BLINK,
          render: () => '_',
          delay: 3000
        },
        {
          showOn: 6,
          render: () => ' text example'
        },
      ]
    }
  ];

  return <Timeline items={TimelineItems} initialTime={5} startDelay={2000} />;
}

You can controls flow of Timeline by setting ref to Timeline

import {useRef} from 'react';
import {Timeline} from '@simpozio/terminal-text';
import {ItemComponent} from './your-custom-item-component';

function Component() {
  const TimelineRef = useRef(null);

  const TimelineItems = [
    {
      showOn: 1,
      hideOn: 2,
      render: () => 'Simple text example',
      delay: 1000
    }
  ];

  return <Timeline ref={TimelineRef} items={TimelineItems} />;
}

And then you can use Timeline methods:

• TimelineRef.next() - increase Timeline inner counter by 1
• TimelineRef.setTime(number) - set Timeline inner counter to passed value
• TimelineRef.getTime() - get value of Timeline inner counter

Single Terminal Text

import {TerminalText} from '@simpozio/terminal-text';

function Component() {
  const textForTyping = 'Some example text';

  return (
    <TerminalText
      className="my-terminal-text"
      startDelay={2000}
      avgTypingDelay={50}
      onTypingDone={() => console.log('typing done')}>
      {textForTyping}
    </TerminalText>
  );
}

Delay and Backspace

• Delay component will add typing delay inside target text
• Backspace component add backspace animation inside target text

import {
  TerminalText,
  Delay,
  Backspace
} from '@simpozio/terminal-text';

function Component() {
  return (
    <TerminalText>
      Some
      <Delay ms={1000} />
      Valuable
      <Backspace count={8} delay={500} />
      Example
      <Delay ms={1000} />
      Text
    </TerminalText>
  );
}

Also you can use this components in TimelineItem render function:

import {
  Timeline,
  Backspace,
  Delay
} from '@simpozio/terminal-text';
import {ItemComponent} from './your-custom-item-component';

function Component() {
  const TimelineItems = [
    {
      showOn: 1,
      render: () => (
        <div>
          Some
          <Delay ms={1000} />
          Valuable
          <Backspace count={8} delay={500} />
          Example
          <Delay ms={1000} />
          Text
        </div>
      )
    }
  ];

  return <Timeline items={TimelineItems} />;
}

Properties

Timeline

• items: TimelineItem[] - array of TimelineItems configuration objects
• startDelay: number - timeout (ms) before Timeline starts performing
• initialTime: number - number of Timeline step to start from

Timeline Item

• type: 'row' | 'delay' | undefined - type of item.
  • 'delay' - item won't render any content, just setting up delay for next step.
  • 'row' - item will render child Timeline Items, you can define wrappern component in render property
  • undefined - item will ignore repeat and items props, it will use it's render function
• goNext: boolean - if false item won't go to next step automatically. Defaults to true
• delay: number - timeout(ms) after text typed and before next step
• render: function - function for rendering child components or text, required if no type defined. Accepts items props if type of item is row
• items: TimelineItem[] - array of child TimelineItems configuration objects. Property supperted only by 'row' item type
• repeat: number - times to repeat delay and increase Timeline step. Property supported only by 'delay' item type
• effect: CSSProp - Styled Components CSSProp Animation object. E.g. for blinking or fade effect. You can import default EFFECT.BLINK object for blink animation.
• onStart: function - lifecycle hook called when TimelineItem component mounted
• onUpdate: function - lifecycle hook called when TimelineItem component updated
• onHide: function - lifecycle hook called when TimelineItem component unmounted
• onTypingDone: function(next) - lifecycle hook called when typing of text finished. Next method will be automatically called after this method, if goNext property is set to true. Accepts next method of Timeline as property.
• Also supported react-typist properties. Look react-typist

Terminal Text

Wrapper around react-typist component. It accepts all it's properties. Look react-typist.

Delay

Wrapper around react-typist Delay component.

• ms: number - timeout(ms) for waiting before writing next character

Backspace

Wrapper around react-typist Backspace component.

• count: number - number of characters to delete
• delay: number - timeout(ms) before deleting

Development

Look simpozio-frontend-common library