# react-typing-effect

> Simulates typing effect, eraser effect and blinking cursor.

Latest version **2.0.5** (published 2021-03-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-typing-effect
pnpm add react-typing-effect
yarn add react-typing-effect
bun add react-typing-effect
```

## Health

**Score 18/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.5 |
| Published | 2021-03-03 |
| First published | 2017-12-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | separate (@types/react-typing-effect) |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 19.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 76 |
| Author | L.Farai Matare |
| Maintainers | lamyfarai |

## Links

- npm: https://www.npmjs.com/package/react-typing-effect
- Repository: https://github.com/lamyfarai/react-typing-effect
- Homepage: https://github.com/lamyfarai/react-typing-effect#readme
- Issues: https://github.com/lamyfarai/react-typing-effect/issues
- npm.io page: https://npm.io/package/react-typing-effect

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1

## Recent versions

- 2.0.5 (latest) — 2021-03-03
- 2.0.4 — 2020-10-04
- 2.0.3 — 2020-01-30
- 2.0.2 — 2019-02-15
- 2.0.1 — 2019-02-12
- 1.0.6 — 2019-02-10
- 1.0.4 — 2018-12-27
- 1.0.3 — 2018-05-22
- 1.0.2 — 2018-05-22
- 1.0.1 — 2018-05-17
- 0.1.1 — 2017-12-16
- 0.1.0 — 2017-12-16

## README

# React Typing Effect

This is a UI component built completely in React that simulates typing effect, eraser effect and a blinking cursor.

## Demo

![Screenshot 1](https://raw.githubusercontent.com/lamyfarai/react-typing-effect/master/screenshot.gif)

## Getting Started

  `$ npm install --save react-typing-effect`

`ReactTypingEffect` is the main component.

### Example Usage:

```javascript
import React from 'react';
import ReactTypingEffect from 'react-typing-effect';

const ReactTypingEffectDemo = () => {
  return (
    <>
      <ReactTypingEffect
        text={["Hello.", "World!"]}
      />

      <br />

      <ReactTypingEffect
        text={["Hello.", "World!!!"]}
        cursorRenderer={cursor => <h1>{cursor}</h1>}
        displayTextRenderer={(text, i) => {
          return (
            <h1>
              {text.split('').map((char, i) => {
                const key = `${i}`;
                return (
                  <span
                    key={key}
                    style={i%2 === 0 ? { color: 'magenta'} : {}}
                  >{char}</span>
                );
              })}
            </h1>
          );
        }}        
      />
    </>
  );
};
```

## Motivation

Inspired by this blog post
http://burnmind.com/tutorials/how-to-create-a-typing-effect-an-eraser-effect-and-a-blinking-cursor-using-jquery

## API

### Required Props

  * `text`: That text that will be typed and erased. Can be either an `array` of strings or just a `string`.

### Other Props

  * `displayTextRenderer`: `func`. `(displayText: string, textIndex: number) => element` If `text` propType is `array`, then `textIndex` will be the `array index` of the text, otherwise `textIndex` will be equal to `0`.  
  * `staticText`: `String`. Text that will just be static and cannot be typed or erased.
  * `className`: `String`
  * `speed`: `Number`. default `500`ms. Typing speed.
  * `eraseSpeed`: `Number`. default `500`ms. Erase speed.
  * `eraseDelay`: `Number`. default `5000`ms. Time to wait before erasing the text.
  * `typingDelay`: `Number`. default `2500`ms. Time to wait before starting to type.
  *  `cursor`: `String`. Default: `|`
  * `cursorClassName`: `String`

---
_Source: https://npm.io/package/react-typing-effect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._