A simple typing animation in React.
Installation
$ npm install typewriting-react
or
$ yarn add typewriting-react
Usage
import React from 'react';
import { Typewriter } from 'typewriting-react';
function App() {
return (
<div className="App">
<Typewriter words={['Developer', 'UX Designer']} />
</div>
);
}
export default App;
API
Prop | Type | Default | Description | |
---|---|---|---|---|
words | array | Required | Array of strings to be animated | |
loop | bool | true | The animation loop | |
typingSpeed | number | 50 | Typing speed in milliseconds | |
erasingSpeed | number | 100 | Erasing speed in milliseconds | |
nextWordDelay | number | 2000 | Time delay before erasing | |
onWordFinishTyping | func | () => {} | Called after typing each word, with index of the current word | |
onFinished | func | () => {} | Called after typing all words in the array | |
cursorStyle | object | {} | Cursor style | |
style | object | {} | Text style | |
className | string | Text css class name | ||
cursorClassName | string | Cursor css class name |
Styling cursor using css
simple css cursor style
.cursor {
background: lime;
line-height: 17px;
margin-left: 3px;
animation: blink 0.8s infinite;
width: 7px;
height: 15px;
display: inline-block;
}
@keyframes blink {
0% {background: #222}
50% {background: lime}
100% {background: #222}
}
import React from 'react';
import { Typewriter } from 'typewriting-react';
// import css file
import './cursor.css';
function App() {
return (
<div className="App">
<Typewriter cursorClassName='cursor' words={['Developer', 'UX Designer']} />
</div>
);
}
export default App;
Advanced usage
import React, {useState}> from 'react';
import { Typewriter } from 'typewriting-react';
import {
Table
} from 'ds-react-table';
function App() {
const [headers, setHeaders] = useState([]);
const [index, setIndex] = useState(0);
const [tableData] = useState([...]);
return (
<>
<div className='container'>
<Typewriter
className='sql-statement'
cursorClassName='cursor'
loop={true}
onWordFinishTyping={(idx) => {
setIndex(idx);
setHeaders(createHeaders(tableData[idx]));
}}
words={words}
/>
</div>
<Table headers={headers} data={tableData[index]} />
</>
);
});
License
MIT