Use-typewriter-animation NPM

use-typewriter-animation

An utility hook to create typewriter animation effect in React.

Requires React >= 16

Install

yarn add use-typewriter-animation

Usage

const { ref, typewriter } = useTypewriter(options);

typewriter
  .type('Hello my name is use-typewriter-animation!')
  .pauseFor(100)
  .deleteLetters(1)
  .colorize('red')
  .type('Dogu!')
  .start();

<div ref={ref} />

Options

`options` accepts properties in the table below.

property	type	*	default
`loop`	boolean	optional	false
`typeSpeed (ms)`	number	optional	30
`deleteSpeed (ms)`	number	optional	30
`color`	string	optional	#000

Available actions

Can be used as chained but make sure to use `start` at last to trigger sequence.

Function	Purpose
`type("Example")`	Types the given (Example) text.
`deleteLetters(5)`	Deletes the (5) letters from the end of text.
`deleteWords(2)`	Deletes the (2) words from the end of text.
`deleteAll()`	Deletes all the text.
`pauseFor(300)`	Pauses (300ms) the typing for the specified time.
`colorize("red")`	Changes the color (red) of the text.
`start()`	Triggers the sequence & starts the typing.

type TypewriterBaseType = {
  type: (text: string) => TypewriterBaseType;
  deleteLetters: (letterCount: number) => TypewriterBaseType;
  deleteWords: (wordCount: number) => TypewriterBaseType;
  deleteAll: () => TypewriterBaseType;
  pauseFor: (duration: number) => TypewriterBaseType;
  colorize: (color: string) => TypewriterBaseType;
  start: () => Promise<void>;
};

Example

import { useEffect } from 'react';
import { useTypewriter } from './useTypewriter';

const Typewriter = () => {
  const { ref, typewriter } = useTypewriter();

  useEffect(() => {
    typewriter
      .type('Hello, this is use-typewriter-animation hook!')
      .pauseFor(300)
      .deleteAll()
      .type('cyan magenta \n\ndarkgray')
      .pauseFor(200)
      .deleteLetters(5)
      .colorize('red')
      .type('yellow black white turquoise green')
      .deleteWords(2)
      .start();
  }, []);

  return <div ref={ref} />;
};

export default Typewriter;