react-clicketyclack

A React component that types out lines of text, one character at a time

Preview

(Demo)

Getting started

npm install --save react-clicketyclack

import React from 'react';
import ClicketyClack from 'react-clicketyclack'

const lines = [
  'Hello',
  'Goodbye',
];

const App = () => (
  <ClicketyClack lines={lines} erase repeat />
);

Props

| Property | PropType | Required | Default Value | | ------------------- | ---------------------- | -------- | ------------- | | lines | arrayOf(string) | true | - | | className | string | false | null | | erase | bool | false | true | | eraseSpeed | number | false | 70 | | onComplete | func | false | null | | pause | number | false | 600 | | repeat | bool | false | true | | speed | number | false | 100 |

lines

An array of lines to be typed out, one after the other.

eraseSpeed

In milliseconds, how fast each character will be erased.

onComplete

Callback function to be called once all lines have been typed. Will be called multiple times when repeat is set to true.

pause

In milliseconds, the pause before starting to type or starting to erase.

repeat

If set to true, it will start over once all lines have been typed.

pause

In milliseconds, how fast each character will be typed.

Other projects

react-clicketyclack was created to emulate the behaviour of jquery.typer.js.

There are other React components that do similar things:

• react-typist
• react-typewriter

License

MIT License