https://github.com/tanmaylaud/react-typewriting-effect

The simplest typewriter effect component in React. ( Requires react >=16.8.0 )
https://github.com/tanmaylaud/react-typewriting-effect

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tanmaylaud/react-typewriting-effect
• Owner: tanmaylaud
• Created: 2020-05-05T18:29:38.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-10-29T15:38:18.000Z (8 months ago)
• Last Synced: 2025-03-29T06:02:29.478Z (3 months ago)
• Language: CSS
• Homepage: https://tanmaylaud.github.io/react-typewriting-effect/
• Size: 2.45 MB
• Stars: 4
• Watchers: 2
• Forks: 3
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-typewriting-effect

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

[![NPM](https://img.shields.io/npm/v/react-typewriting-effect.svg)](https://www.npmjs.com/package/react-typewriting-effect) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![](preview.gif)

## Updates in v1.0.4

- cursor option to add custom cursor text

- cursor css can be customised using cursorClassName

## Install

```bash

npm install --save react-typewriting-effect

```

## Usage

```tsx

import React from 'react'

import { Typewriter } from 'react-typewriting-effect'

import 'react-typewriting-effect/dist/index.css'

const App = () => {

  return 

}

export default App

```

```tsx

import React from 'react'

import { Typewriter } from 'react-typewriting-effect'

import 'react-typewriting-effect/dist/index.css'

const App = () => {

  return (

    

  )

}

export default App

```

```tsx

import React from 'react'

import { Typewriter } from 'react-typewriting-effect'

import 'react-typewriting-effect/dist/index.css'

const App = () => {

  return (

    

  )

}

export default App

```

You can view demo [here](https://tanmaylaud.github.io/react-typewriting-effect/)

## 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](https://github.com/tanmaylaud)