This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

React Typer Component

Create typewriter effect by setting up a component's children directly.

Caveat ⚠⚠⚠

This package is not production-ready, Use it with caution.

Features 🎈

• [x] Directly set up text inside a component
• [x] Allow nested elements
• [x] Custom cursor
• [x] Curstom string splitting
• [x] Support pasting text
• [x] Support pause
• [x] Support backspace

Install

npm install react-typer-component
# or
yarn add react-typer-component

How to use

import Typer from 'react-typer-component';

const MyComponent = () => {
  return (
    <Typer cursor={<span className="cursor">|</span>}>
      This is a typo
      <Typer.Backspace count={4} />
      <Typer.Paste>react component</Typer.Paste>
      <Typer.Pause ms={1500} />
      <div>
        use
        <div>deeper div</div>
      </div>
    </Typer>
  );
};

The final result will look like:

<div>
  This is a react component
  <div>
    use
    <div>
      deeper div
      <span className="cursor">|</span>
    </div>
  </div>
</div>