React-typing-animation
A fully-featured typing animation in React that supports any valid JSX.
Motivation
There were other JS typing animations that existed when I created this, but they were all lacking in robust features. This component aims to support all of the following features:
✅ Type text from any valid JSX
✅ Preserve DOM structure/styling
✅ Change typing speed anywhere in tree
✅ Add a delay anywhere in tree
✅ Backspace animation
✅ Reset lines / full tree
✅ Loop functionality
✅ No dependencies (CSS or JS)
Demo
Then open http://localhost:3000/ in a browser.
Feature requests and pull requests welcome
Installation
Usage
Documentation
Property | Type | Default | Required |
---|---|---|---|
children | React node | yes | |
className | string | no | |
cursor | React node | <Cursor /> |
no |
speed | number | 50 (ms) | no |
startDelay | number | 0 (ms) | no |
loop | boolean | false | no |
onFinishedTyping | function | () => {} | no |
Backspace Component
Property | Type | Default | Required | Description |
---|---|---|---|---|
count | number | 1 | false | |
delay | number | 0 | false | |
speed | number | -1 | false |
Delay Component
Property | Type | Default | Required | Description |
---|---|---|---|---|
ms | number | yes |
Speed Component
Property | Type | Default | Required | Description |
---|---|---|---|---|
ms | number | yes |
Reset Component
Property | Type | Default | Required | Description |
---|---|---|---|---|
count | number | 0 | false | |
delay | number | 0 | false | |
speed | number | -1 | false |