A react component for adding a nice typewriter effect

React Simple Typewriter

A simple react component for adding a nice typewriter effect to your project.

Install

# npm
npm i react-simple-typewriter

# Yarn
yarn add react-simple-typewriter

Usage (Hook)

import { useTypewriter } from 'react-simple-typewriter'

const CustomSimpleTypewriter = () => {
  const text = useTypewriter({
    words: ['i', 'use', 'hooks!'],
    loop: true,
    onLoop: (loopCount) => console.log(`Hook completed loop ${loopCount}`),
    onDone: () => console.log('Done!')
  })

  return <span>{text}</span>
}

Hook Configuration

interface TypewriterConfig {
  words: string[]
  loop?: boolean = false
  typeSpeed?: number = 100
  deleteSpeed?: number = 50
  delaySpeed?: number = 1500
  onLoop?: (loopCount: number) => void = noop // only called if loop = true
  onDone?: () => void = noop // only called if loop = false
}

Usage (Component)

import React from 'react'

import Typewriter from 'react-simple-typewriter'
import 'react-simple-typewriter/dist/index.css'

export default function App() {
  return (
    <div className='App'>
      <h1
        style={{ paddingTop: '5rem', margin: 'auto 0', fontWeight: 'normal' }}
      >
        Life is simple{' '}
        <span style={{ color: 'red', fontWeight: 'bold' }}>
          {/* Style will be inherited from the parent element */}
          <Typewriter
            loop
            cursor
            cursorStyle='_'
            typeSpeed={70}
            deleteSpeed={50}
            delaySpeed={1000}
            words={['Eat', 'Sleep', 'Code', 'Repeat!']}
            onLoop={(loopCount) =>
              console.log(`Just completed loop ${loopCount}`)
            }
          />
        </span>
      </h1>
    </div>
  )
}

Available Props

GitHub

https://github.com/awran5/react-simple-typewriter