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