typewriting-react

1.0.12 • Public • Published

A simple typing animation in React.

npm GitHub stars gzip size Travis (.org) npm

rt

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;

toggle

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;

toggle

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]} />
    </>
  );
});

toggle

License

MIT

Package Sidebar

Install

npm i typewriting-react

Weekly Downloads

25

Version

1.0.12

License

MIT

Unpacked Size

10 kB

Total Files

6

Last publish

Collaborators

  • julekgwa