React Simple Typewriter

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

screenshot

View Demo View Github

Install

# npm
npm i react-simple-typewriter

# Yarn
yarn add react-simple-typewriter
Bash

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>
}
React JSX

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
}
TypeScript

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>
  )
}
React JSX

Available Props

Prop Type Description Default
loop Boolean Repeat the typing effect (true if present) false
cursor Boolean Show / Hide cursor (show if present) false
cursorStyle String Change the cursor style |
typeSpeed Integer Speed in Milliseconds 100
deleteSpeed Integer Word deleting speed in Milliseconds 50
delaySpeed Integer Delay after the word is written in Milliseconds 1500
words Array Array of strings holding the words -
onLoop (loopCount: Integer) => void Called when a loop is complete. loopCount is the total number of completed loops. Only called if loop = true noop
onDone () => void Called when typewriter is done. Only called if loop = false noop

GitHub

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