react-animated-typewriter

The react-animated-typewriter package is a quick and easy way to implement a typewriter animation component without needing to write any CSS animations or React state management code yourself. This package is based on react-typical and supersets its interface.

Live Demo: danieltherealyang.github.io

Install

npm install react-animated-typewriter

Usage

import Typing from 'react-animated-typewriter';

function AnimatedTyping() {
  const wait = 1500;
  return (
    <Typing
      steps={[
        'React', wait,
        'C++', wait,
        'Java', wait,
        'Python', wait
      ]}
      loop={Infinity}
      wrapper="b"
      typeDelay={100}
      deleteDelay={10}
    />
  );
}

Props

| Name | Required | Type | Description | Example | Default | -- | -- | -- | -- | -- | -- | | steps | Yes | array | Determines words to animate and time to wait after typing a word | ['React', 1000, 'C++', 'Python'] | None | wrapper | No | string | Element to wrap text in | 'b' | <span></span> | loop | No | number | Number of times to iterate through steps array | 5 | 1 | typeDelay | No | number | Delay in ms after each character when typing | 100 | 50 | deleteDelay | No | number | Delay in ms after deleting each character |10 | 50

License

GNU GPL v3 © danieltherealyang