use-typewriter-hook

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;
}