Creating Animated Typing Effects in React using react -typing-animator

Have you ever come across a typing animation on a website and thought, “Wow, that’s cool! I wish I could use that in my project.” If so, you’re in luck! The react-typing-animator package is a lightweight and easy-to-use component for adding a typing animation to your React projects.

Installation

To use react-typing-animator in your project, simply install it via NPM or Yarn:

npm install react-typing-animator

or

yarn add react-typing-animator

Usage

Using react-typing-animator is incredibly simple. Just import the component, pass in an array of texts, and watch as the typing animation loops through them.

Here’s a basic example:

import React from 'react';
import TypingAnimator from 'react-typing-animator';

function App() {
  const textArray = ['Welcome', 'to', 'the', 'React', 'Typing', 'Animator'];
  return (
    <TypingAnimator textArray={textArray} />
  );
}

export default App;

This will create a looping typing animation of each word in the textArray prop.

Customization

You can customize the animation by passing additional props to the TypingAnimator component. Here are the available props and their default values:

interface Props {
  textArray: string[];
  cursorColor?: string;
  textColor?: string;
  fontSize?: string;
  typingSpeed?: number;
  delaySpeed?: number;
}

You can set the colour of the cursor with the cursorColor prop, the text colour with the textColor prop, and the font size with the fontSize prop. You can also adjust the typing speed and delay between each word with the typingSpeed and delaySpeed props, respectively.

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="#ff0000"
      textColor="#0000ff"
      fontSize="2rem"
      typingSpeed={50}
      delaySpeed={500}
    />
  );
}

export default App;

This will create a typing animation with a red cursor, blue text, a font size of 2rem, a typing speed of 50ms and a delay of 500ms.

Give react-typing-animator a try and see how it can enhance your website or web application. If you have any suggestions or feedback, feel free to leave them in the comments below.