react-typing-animator
v6.1.0
Published
A React component that animates a given text array into a looping typing animation of each word.
Downloads
121
Maintainers
Readme
React Typing Animator
React Typing Animator is a React component for animating an array of texts like a typing sequence with blinking and a cursor. It can be used in both React and Next.js applications.
Installation
You can install the package via npm or yarn:
npm install react-typing-animator
# or
yarn add react-typing-animator
Usage
To use the component, you need to import it and pass an array of texts to the textArray
prop and also pass a boolean value to the loop
prop. You can also customize the cursor color, text color, font size, typing speed, and delay speed.
import React from 'react';
import TypingAnimator from 'react-typing-animator';
function App() {
const textArray = ['Welcome', 'to', 'the', 'React', 'Typing', 'Animator'];
return (
<TypingAnimator
textArray={textArray}
cursorColor="#333"
textColor="#555"
fontSize="24px"
loop
typingSpeed={60}
delaySpeed={1000}
backspace
height="60px"
dynamicDelay
style={{fontFamily: "Helvetica" , fontWeight: "bold", marginTop: "10px"}}
/>
);
}
export default App;
Props
The component accepts the following props:
| Prop Name | Type | Default Value | Description |
| --- | --- | --- | --- |
| textArray
| string[] | []
| An array of texts to be animated.This is required|
| loop
| boolean | false | If you need the animation to continue in a loop or stop after a single iteration. This is required|
| cursorColor
| string | #000
| The color of the cursor. |
| textColor
| string | #000
| The color of the text. |
| fontSize
| string | 16px
| The font size of the text. |
| typingSpeed
| number | 200
| The speed at which the typing animation occurs, in milliseconds per character. |
| delaySpeed
| number | 1500
| The delay between each text animation, in milliseconds. |
| backspace
| boolean | false
| Wether to enable the backspace behavior and animation. |
| height
| string | 40px
|Height of the text container. |
| dynamicDelay
| boolean | false | Adjust the delay based on the length of the current text. |
| style
| CssProperties | {} | Add any custom style to the component.|
Hire Me
If you'd like to hire me for your project or learn more about my experience, please check out my LinkedIn profile!
Contributing
We welcome contributions! If you have ideas for new features or improvements, please open an issue or submit a pull request.
License
The React Typing Animator is released under the MIT License. See LICENSE.md for more information.