React-typing-animator NPM

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"
    />
  );
}

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.