react-typewriting-effect

The simplest typewriter effect component in React. ( Requires react >=16.8.0 )

Updates in v1.0.4

• cursor option to add custom cursor text
• cursor css can be customised using cursorClassName

Install

npm install --save react-typewriting-effect

Usage

import React from 'react'

import { Typewriter } from 'react-typewriting-effect'
import 'react-typewriting-effect/dist/index.css'

const App = () => {
  return <Typewriter string='This is an example of typewriting 😄' delay={80} />
}

export default App

import React from 'react'

import { Typewriter } from 'react-typewriting-effect'
import 'react-typewriting-effect/dist/index.css'

const App = () => {
  return (
    <Typewriter
      string='In this example, the cursor will stop blinking after ther string is completely rendered'
      delay={80}
      stopBlinkinOnComplete
    />
  )
}

export default App

import React from 'react'

import { Typewriter } from 'react-typewriting-effect'
import 'react-typewriting-effect/dist/index.css'

const App = () => {
  return (
    <Typewriter
      string='In this example, the cursor will be _ and speed will be 50'
      delay={50}
      cursor='_'
    />
  )
}

export default App

You can view demo here

Options

| Name | Type | Default value | Description | | ----------------------- | --------------- | ------------- | --------------------------------------------------- | | string | String | | String to type out | | delay (speed in v1.0.3) | number | 100 | The delay between each key when typing. | | onComplete | Lambda/Function | () => {} | Function to execute when string is completely typed | | stopBlinkinOnComplete | Boolean | false | Whether to blink cursor after string is typed | | className | String | '' | Field to set classes for the HTML Element | | cursor | String | ' | ' | Cursor string | | cursorClassName | String | undefined | Field to set classes for the cursor |

License

MIT © tanmaylaud