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

There are two ways to Typewriter:

1. Component

import React from 'react'
import { Typewriter } from 'react-simple-typewriter'

const MyComponent = () => {
  return (
    <div className='App'>
      <Typewriter {/* Props */} />
    </div>
  )
}

Component Props

Prop	Type	Options	Description	Default
words	array	Required	Array of strings holding the words	['Hello', '...']
typeSpeed	number	Optional	Character typing speed in Milliseconds	80
deleteSpeed	number	Optional	Character deleting speed in Milliseconds	50
delaySpeed	number	Optional	Delay time between the words in Milliseconds	1500
loop	number | boolean	Optional	Control how many times to run. 0 | false to run infinitely	1
cursor	boolean	Optional	Show / Hide a cursor	false
cursorStyle	ReactNode	Optional	Change the cursor style available if cursor is enabled	|
cursorBlinking	boolean	Optional	Enable cursor blinking animation	true
onLoopDone	function	Optional	Callback function that is triggered when loops are completed. available if loop is > 0	-
onType	function	Optional	Callback function that is triggered while typing with typed words count passed	-
onDelay	function	Optional	Callback function that is triggered on typing delay	-
onDelete	function	Optional	Callback function that is triggered while deleting	-

---

Usage Example

import React from 'react'
import { Typewriter } from 'react-simple-typewriter'

const MyComponent = () => {

  const handleType = (count: number) => {
    // access word count number
    console.log(count)}
  }

  const handleDone = () => {
    console.log(`Done after 5 loops!`)
  }

  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
            words={['Eat', 'Sleep', 'Code', 'Repeat!']}
            loop={5}
            cursor
            cursorStyle='_'
            typeSpeed={70}
            deleteSpeed={50}
            delaySpeed={1000}
            onLoopDone={handleDone}
            onType={handleType}
          />
        </span>
      </h1>
    </div>
  )
}

2. Hook

BREAKING CHANGES v5.0.0 Hook now returns text along with some useful flags:

Prop	Type	Description
isType	boolean	Check if currently typing
isDelete	boolean	Check if currently deleting
isDelay	boolean	Check if currently on delay
isDone	boolean	Check if all running loops are done

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

const MyComponent = () => {
  /**
   * @returns
   * text: [string] typed text
   * NEW helper: {} helper flags
   */
  const [text, helper] = useTypewriter({
    /* Config */
  })

  /* Hook helper */
  const { isType, isDelete, isDelay, isDone } = helper

  return (
    <div className='App'>
      <span>{text}</span>
    </div>
  )
}

Hook Config

Prop	Type	Options	Description	Default
words	array	Required	Array of strings holding the words	['Hello', '...']
typeSpeed	number	Optional	Character typing speed in Milliseconds	80
deleteSpeed	number	Optional	Character deleting speed in Milliseconds	50
delaySpeed	number	Optional	Delay time between the words in Milliseconds	1500
loop	number | boolean	Optional	Control how many times to run. 0 | false to run infinitely	1
onLoopDone	function	Optional	Callback function that is triggered when loops are completed. available if loop is > 0	-
onType	function	Optional	Callback function that is triggered while typing	-
onDelete	function	Optional	Callback function that is triggered while deleting	-
onDelay	function	Optional	Callback function that is triggered on typing delay	-

Hook Usage Example

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

const MyComponent = () => {
  const [text] = useTypewriter({
    words: ['Hello', 'From', 'Typewriter', 'Hook!'],
    loop: 0
  })

  return (
    <div className='App'>
      <span>{text}</span>
    </div>
  )
}

Hook with Cursor

If you like to have the Cursor effect, you can import it as a separate Component

import React from 'react'
import { useTypewriter, Cursor } from 'react-simple-typewriter'

const MyComponent = () => {
  const [text] = useTypewriter({
    words: ['Hello', 'From', 'Typewriter', 'Hook!'],
    loop: 3,
    onLoopDone: () => console.log(`loop completed after 3 runs.`)
  })

  return (
    <div className='App'>
      <span>{text}</span>
      <Cursor cursorColor='red' />
    </div>
  )
}

Cursor Component Props

Prop	Type	Options	Description	Default
cursorStyle	ReactNode	Optional	Change cursor style	|
cursorColor	String	Optional	Change cursor color	inherit
cursorBlinking	Boolean	Optional	disable cursor blinking animation	true

---

Demo

License

MIT © awran5