Licence
MIT
Version
0.1.0
Deps
0
Vulns
0
Weekly
0
DeprecatedThis package is deprecated
The simplest customizable typewriter component built with React.
3KB gziped (including styling).
Features
Supports infinitely nested JSX elements.
Preserves formatting on child elements.
Allows custom typing and erasing speeds.
Cycles easily through a list of elements.
Gives full control on styling with CSS.
Allows custom cursor.
Demo
--GIF image demo here--
Installation
npm install react-typeUsage
import Type from 'react-type';
<Type>The earth is but one country, and mankind its citizens.</Type>API
| Props | Type | Description |
|---|---|---|
| className | String | Applies a class style to the element. |
| cycle | Boolean | Cycle through a list of child elements. Default: false |
| cycleType | String | erase: erases previous element before typing the next element.reset: resets cursor to start position before typing the next element.Default: erase |
| defaultElement | String or Element | The default element to start cycling animation with. Default: '' |
| eraseDelay | Number | Delay (in ms) before starting to erase characters when cycling. Default: 2000 |
| onTypingDone | Function | Callback when typing animation is over. |
| pause | Boolean | Controls the start of typing animation. Default: false |
| startTypingDelay | Number | Delay (in ms) before start of typing. Default: 0 |
| typingDelay | Number | Delay (in ms) before each character typed. Default: 30 |
| hideCursorDelay | Number | Delay (in ms) before hiding the cursor at the end of the typing animation. A negative value will prevent the cursor from hiding. Default: -1 |
| cursorColor | String | The color of the cursor. Default: #000 |
| cursorWidth | Number | The width of the cursor in px. Default: 2 |