@chrisfieldsii/react-use-typewriter

React Use Typewriter

A configurable react hook for a typewriter effect. Includes a Typewriter component out the box. Forked from react-simple-typewriter

Install

# npm
npm i @chrisfieldsii/react-use-typewriter

# Yarn
yarn add @chrisfieldsii/react-use-typewriter

Usage (Hook)

import { useTypewriter } from '@chrisfieldsii/react-use-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 (see props table below for descriptions)

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 '@chrisfieldsii/react-use-typewriter'
import '@chrisfieldsii/react-use-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	required
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

License

MIT © ChrisLFieldsII