react-typing-animate v1.1.3

react-typing-animate

]github-license-url

React Typing animate is an npm package use for typing animation

Live Demo

Installation:

npm install react-typing-animate --save-dev

or

yarn add -D react-typing-animate

Usage :

Add Typing to your component:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Typing } from 'react-typing-animate'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <React.StrictMode>
    <div>
      <h2>
        Hi, i am a <Typing text={['software developer', 'writer']} speed={400} />
      </h2>
    </div>
  </React.StrictMode>,
)

Props:

Description:

text:

this is an array of strings that your want to animate. e.g text={'hello', 'world'}

speed:

this is the speed at which you want to animate, 1000 represents 1 seconds. e.g speed={400}

cursor:

this is a blinking cursor at the front of the text, it accepts onlt two strings, either an aunderstrike ( ) or a Pipe symbol ( | ). e.g cursor = '' or cursor = '|'

textClassName:

this props is use to give the text a class name

cursorClassName:

this props is use to give the cursor a class name

repeat:

this props is use to make the animation play once or repeat e.g repeat= {true}