React useTypewriter

NPM Repository

Installation

You can install React useTypewriter with one simple command

# with npm
npm i use-typewriter-hook

# with yarn
yarn add use-typewriter-hook

Options

| Name | Type | Default value | Description | | ----------------- | ------------------ | ----------------------- | ------------------------------------------------------------------ | | targetText | String or String[] | "" (empty string) | Strings to type out when using this tool. | | autoStartDelay | Number | 100ms | Amout of milliseconds delay at the start of the typewriter effect. | | typingDelayMillis | Number | 100ms | The delay between each key when typing. | | loop | Boolean | false | Option to keep looping the targetText after finish. | | loopDelay | Number | 100 | The delay between each loop (milliseconds). | | wrapperClassName | String | 'use-typewriter-cursor' | Class name for the wrapper element. |

Methods (Functions)

All methods can be chained together.

| Name | Params | Description | | ----- | ------ | --------------------------------------- | | pause | - | Pause the typewriter effect on calling. | | start | - | Start the typewriter effect. |

Examples

Basic example

import * as React from "react";
import { useTypewriter } from "../useTypewriter";
import "./custom.css";

const BasicTypewriter: React.FC = () => {
  const targetText =
    "Welcome to React Typewriter. This is a basic typewriter. You can also display emojis, like this 😜🤩🥳😍!";
  const { textValue: typedText } = useTypewriter({
    targetText: targetText,
    autoStartDelay: 0,
    typingDelayMillis: 50,
  });

  return <div className="basic-typewriter">{typedText}</div>;
};

export default BasicTypewriter;

function App() {
  return (
    <div className="App">
      <div className="typewriter">
        <BasicTypewriter />
      </div>
    </div>
  );
}

https://user-images.githubusercontent.com/69443738/137083086-da4e8123-7371-49c1-b856-07cf21f9854f.mp4

Custom cursor typewriter

import * as React from "react";
import { useTypewriter } from "../useTypewriter";
import "./custom.css";

const CustomCursorTypewriter: React.FC = ({}) => {
  const targetText =
    "Welcome to React Typewriter. This is a typewriter with custom cursor (color).";
  const { textValue: typedText, wrapperClassName } = useTypewriter({
    targetText: targetText,
    autoStartDelay: 0,
    typingDelayMillis: 50,
  });
  return (
    //   Have to compose classNames to get all the css rules
    <div
      className={`${wrapperClassName} custom-cursor-typewriter`}
      id="custom-cursor-typewriter"
    >
      {typedText}
    </div>
  );
};

export default CustomCursorTypewriter;

function App() {
  return (
    <div className="App">
      <div className="typewriter">
        <CustomCursorTypewriter />
      </div>
    </div>
  );
}

https://user-images.githubusercontent.com/69443738/137083003-7ee00bcc-7df3-4bd1-b482-b76adeec1ee5.mp4

Custom typewriter with highlight and colored text

import * as React from "react";
import { useTypewriter } from "../useTypewriter";
import "./custom.css";

const CustomTypewriter: React.FC = () => {
  const targetText =
    "Welcome to React Typewriter. This is a custom typewriter, you can highlight different words.";

  const { textValue: typedText, wrapperClassName } = useTypewriter({
    targetText: targetText,
    autoStartDelay: 0,
    typingDelayMillis: 50,
  });

  /**
   * You can select as many words or phrases as you like to highlight/customize their color/bold
   * Here as an example, we select one phrase and one word to customize
   */
  const stringToSearch = "React Typewriter";
  const stringToSearch2 = "highlight";

  const startIndex1 = targetText.indexOf(stringToSearch);
  const endIndex1 = startIndex1 + stringToSearch.length;
  const startIndex2 = targetText.indexOf(stringToSearch2);
  const endIndex2 = startIndex2 + stringToSearch2.length;

  const fragments = splitTargetText(
    typedText,
    startIndex1,
    endIndex1,
    startIndex2,
    endIndex2
  );

  return (
    <div>
      <p className={wrapperClassName} id="custom-typewriter">
        {fragments}
      </p>
    </div>
  );
};

const splitTargetText = (
  str: string,
  startIndex1: number,
  endIndex1: number,
  startIndex2: number,
  endIndex2: number
): React.ReactNode[] => {
  /**
   * Return everything from 0...startIndex of str as a string,
   * return evevertying from startindex to endindex as a bolded span
   * return everything from endindex to str.length as a string
   */
  return [
    str.slice(0, startIndex1),
    <strong className="custom-typewriter-text">
      {str.slice(startIndex1, endIndex1)}
    </strong>,
    str.slice(endIndex1, startIndex2),
    <mark>{str.slice(startIndex2, endIndex2)}</mark>,
    str.slice(endIndex2, str.length),
  ];
};

export default CustomTypewriter;

function App() {
  return (
    <div className="App">
      <div className="typewriter">
        <CustomTypewriter />
      </div>
    </div>
  );
}

https://user-images.githubusercontent.com/69443738/137082907-6c6c411d-e90a-482d-ab92-080764b02d5c.mp4

Typewriter with looping effect

import * as React from "react";
import { useTypewriter } from "../useTypewriter";
import "./custom.css";

interface Props {}

const TypewriterWithLoop: React.FC<Props> = ({}) => {
  const targetText =
    "Welcome to React Typewriter. This is a typewriter with looping effect.";
  const { textValue: typedText, wrapperClassName } = useTypewriter({
    targetText: targetText,
    autoStartDelay: 0,
    typingDelayMillis: 50,
    loop: true,
  });
  return <div className={wrapperClassName}>{typedText}</div>;
};

export default TypewriterWithLoop;

function App() {
  return (
    <div className="App">
      <div className="typewriter">
        <TypewriterWithLoop />
      </div>
    </div>
  );
}

https://user-images.githubusercontent.com/69443738/137082838-19ebe1a7-efbd-483b-8e8b-484bb92dc8a6.mp4

CSS file for styling for four examples above

/* BASIC TYPEWRITER */
.basic-typewriter {
  font-family: "PT Mono", monospace;
  font-weight: 500;
  font-size: 2rem;
}

/* CUSTOM TYPEWRITER WITH BOLD, COLOR, AND HIGHLIGHT */
.custom-typewriter-text {
  color: rgb(46, 46, 206);
}

#custom-typewriter {
  font-family: "PT Mono", monospace;
  font-weight: 500;
  font-size: 2rem;
}

/* CUSTOM TYPEWRITER WITH CUSTOM COLOR CURSOR */
.custom-cursor-typewriter:after {
  border-right: 4px solid rgb(99, 238, 99);
}

.custom-cursor-typewriter {
  font-family: "PT Mono", monospace;
  font-weight: 500;
  font-size: 2rem;
}

/* TYPEWRITER WITH INFINITE LOOPING EFFECT */
.use-typewriter-cursor {
  font-family: "PT Mono", monospace;
  font-weight: 500;
  font-size: 2rem;
}