React-simple-typewriter NPM

React Simple Typewriter

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

npm bundle size GitHub

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	`\\|`
`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`