react-typing-animate
v1.1.3
Published
this is a simple react component use for text typing animation
Downloads
46
Maintainers
Readme
react-typing-animate
React Typing animate is an npm package use for typing animation
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:
| Syntax | Types | Default | | :--- | :----: | ---: | | text | string[] | [] | | speed | number | 500 | | cursor | string | "_" | | textClassName | string | | | cursorClassName | string | | | repeat | boolean | true |
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}