⌨️
React-Typing
Typing animation with react
Why?
You want a typing animation in your application. You want it to keep the DOM structure with nested elements and allow you to use custom components. You also want it to be easily stylable and highly configurable.
This library provides a Typing
component that you can wrap around text or
other react components and it will animate the text inside.
Installation
$ npm install --save react-typing
Usage
import React from 'react';
import { Typing } from 'react-typing';
function App() {
return (
<Typing>
Hello World!
</Typing>
);
}
// Pass html elements as children
<Typing>
Hello <span className="abc123">World</span>!
</Typing>
<Typing>
Hello <a href="#">World</a>!
</Typing>
// Pass react components
<Typing>
Hello World!
<Format type="date" format="MM/DD/YYYY">
{new Date()}
</Format>
</Typing>
<Typing />
The Typing
component will animate any text in props children.
Props
delay
(number)
Default: 0
Delay before the typing animation begins. This delay value is in milliseconds.
keyDelay
(number)
Default: 100
Sets the animation delay between each key press. This delay value is in milliseconds.
onDone
(function)
Function to be called when typing animation is done.