react-use-typewriter v1.0.0

React Typewriter effect hook

Getting Started

npm install --save react-use-typewriter

Or

yarn add react-use-typewriter

Usage Example

import useTypewriter from "react-use-typewriter";

const Example = () => {
  const words = ["react", "typescript", "nodejs"];
  const currentWord = useTypewriter({words});

  return (
    <div>
      {currentWord}
      <span className="cursor">|</span>
    </div>
  );
}

Options

CSS for blinking cursor

Blinking cursor is not included but can be implemented easily with CSS:

@keyframes blink {
  from, to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.cursor {
  animation: blink 1s linear infinite forwards;
}