Simple-TypeWriter-React

A simple and easy to use library for typewriter effect in react

DEMO

Install

npm

npm i simple-typewriter-react 

Yarn

yarn add simple-typewriter-react

Bun

bun add simple-typewriter-react

---

Usage

1import React from 'react'
2import SimpleTypeWriter from 'simple-typewriter-react'
3
4const TestComponent = () => { 
5
6    return (
7        <div>
8            <SimpleTypeWriter
9                words={["Dream", "Believe", "Do", "Repeat"]} 
10                loop={true} 
11                typeSpeed={120}
12                deleteSpeed={80}
13                delay={1500}
14                cursor={true}
15                cursorStyle="|"
16                styles={{fontWeight: "700", "...all other css styles"}} 
17                fontSize="20px" 
18                color="red" 
19            />
20        </ div>
21    )
22}
23

Component Props

Prop	Type	Description	Default
words	array	String array holding words to show	["Hello", "..."]
typeSpeed	number	Typing speed of individual characters	80
deleteSpeed	number	Delete speed of individual characters	50
delay	number	Delay between words	1500
loop	bool	Controls if words should loop after finishing	true
cursor	bool	Controls if cursor is displayed	trye
cursorStyle	string	Change the cursor style if enabled	"|"