@vegadev/react-type-writer

react-type-writer

This is a super light-weight and easy to use react hook for simulating a typing effect. Unlike many other packages, this doesn't force you to use a component, and just gives you the string, which you can use however you need to.

Install

npm install --save react-type-writer
yarn add react-type-writer

Sample Usage

Different situations and implementation is available in the following sample project. Code Sandbox

Usage

import * as React from "react";

import { useTypeWriter } from "react-type-writer";

const Example = () => {
  const text = useTypeWriter({
    text: [
      "Born To Shine!",
      "Build For Today, Think For The Future!",
      "Vegaris",
    ],
    infiniteLoop: true,
    blinker: "_",
    delay: 3000,
    blinkerDelay: 100,
  });
  return <div>{text}</div>;
};

Props

Props	Type	Usage	Default
text	string | string[]	Gets a string or an array of strings to write them in the typewriter	null
delay	number in miliseconds	Gets a number in miliseconds and utilize it as the time stays on each completed sentence	1000ms
blinkerDelay	number in miliseconds	Gets a number in miliseconds and utilize it as the delay time for the blinker to blink	500ms
blinker	string	Gets a string (usually a character) to show as the blinker	|
infiniteLoop	boolean	To know if to loop over the text or not after end	false

License

MIT © ErfanAsadi

Authors

Iman Akrami, Erfan Asadi