typewriting-react

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