React-TypeMe

React-TypeMe is a typewriter animation simulator component built to be simple and powerful. It is built as a pure React functional component using React Hooks.

Features

• ✔️ Extremely lightweight (less than 2KB gzipped including styling).
• ✔️ Loop typing animation.
• ✔️ Add custom line breaks.
• ✔️ Simulate backspace character key.
• ✔️ Control typing and delete speeds.
• ✔️ Use custom cursor character.
• ✔️ Introduce artificial typing delays.
• ✔️ Control start of typing animation.
• ✔️ Built for React — No external dependencies.

Usage Examples

import TypeMe from 'react-typeme';

<TypeMe>Simple string passed as children</TypeMe>

import TypeMe, { LineBreak } from 'react-typeme';

<TypeMe
  strings={[
    'These strings are passed',
    <LineBreak />,
    'as an array via props'
  ]}
/>

import TypeMe, { Delete } from 'react-typeme';

<TypeMe
  strings={[
    'Hello there.',
    'Can you please erase this sentence?',
    <Delete characters={35} />,
    'Thank you!'
  ]}
/>

import TypeMe, { Delay } from 'react-typeme';

<TypeMe
  strings={[
    'Hey, hold on a sec...',
    <Delay ms={2000} />,
    ' Thank you for trying my delay feature!'
  ]}
/>

Installation

$ npm install --save react-typeme

import React from 'react';
import TypeMe from 'react-typeme';

<TypeMe>Simple string passed as children</TypeMe>

License

Use React-TypeMe in personal or open source projects 100% free of charge. To use it in commercial projects, thank you for purchasing a single or multi-project license right here.