README
react-typing2
A tiny React library for animation typing effect with optional text highlighting.
- Vanilla JavaScript ⚡
- ~260kb ⚡
- no JQuery needed 🎉
- ES6 ✔️
<Typing
// ... you can add more props here
data={[
{ sentence: "Typing effect..." },
{ sentence: "...with highlighting.", highlight: "highlighting", color: "#3366cc" }
// ...
]}
/>
Getting started
Installation
npm install --save react-typing2
Usage
import Typing from 'typing-react2';
// Basic setup with standard options without text highlighting.
<Typing data={{ sentence: "Typing effect..." }} />
// You can use an array to output more than one sentence.
<Typing
data={[
{ sentence: "My first sentence." },
{ sentence: "Even more text here." },
]}
/>
// To highlight text
<Typing
data={{
sentence: "The sky is blue today.", highlight: 'blue', color: '#aeccfc'
}}
/>
// Modify typing speed etc.
<Typing
data={{
sentence: "The sky is blue today.", highlight: 'blue', color: '#aeccfc'
}}
speed={80}
delete={true} // <-- will delete the text after its fully written.
deleteSpeed={50}
hideCursorOnExit={true}
// new loop features
loop={1}
infiniteLoop={false}
/>
Options
Add some additional options to style your typing effect.
speed
The typing effect uses a delay in ms between each written letter.
Default:
40
initDelay
Initial delay in ms. If some delay is needed before output.
Default:
0
betweenDelay
After each fully written sentence will be a break in ms.
Default:
500
delete
A sentence can be deleted after its full appearance.
Default:
true
deleteSpeed
The deletion uses a delay in ms between each deleted letter.
Default:
100
deleteDelay
Before starting the deletion effect there will be a pause in ms.
Default:
1500
removeOnExit
Clear the content after the effect is completed.
Default:
false
loop
Repeat the animation loop times. Ignored if infiniteLoop true.
Default:
1
infiniteLoop
Runs the animation infinitely. Option loop will be ignored.
Default:
false
Cursor options
hideCursor
Hide the cursor.
Default:
false
cursorHeight
Set the height of the cursor. All units possible.
Default:
42px
cursorColor
Change the color of the cursor.
Default:
#fffff
cursorClass
Add a custom class name to the cursor.
Default:
null
hideCursorOnExit
Hide the blinking cursor after the effect is completed.
Default:
false
- License MIT
- Made by Frank Arlt
- Inspired by Typing Carousel Effect (https://codepen.io/josephwong2004/pen/ExgoKde)