0.1.0 • Published 7 years ago
react-type v0.1.0
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 |
0.1.0
7 years ago