A React component that types out lines of text, one character at a time
(Demo)
npm install --save react-clicketyclackimport React from 'react';
import ClicketyClack from 'react-clicketyclack'
const lines = [
'Hello',
'Goodbye',
];
const App = () => (
<ClicketyClack lines={lines} erase repeat />
);| 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 |
An array of lines to be typed out, one after the other.
In milliseconds, how fast each character will be erased.
Callback function to be called once all lines have been typed. Will be called multiple times when repeat is set
to true.
In milliseconds, the pause before starting to type or starting to erase.
If set to true, it will start over once all lines have been typed.
In milliseconds, how fast each character will be typed.
react-clicketyclack was created to emulate the behaviour of jquery.typer.js.
There are other React components that do similar things:
MIT License