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

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

Demo

codeSandbox

License

MIT © awran5