use-typewriter-hook
TypeScript icon, indicating that this package has built-in type declarations

3.1.2 • Public • Published

React useTypewriter

CircleCI

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

Package Sidebar

Install

npm i use-typewriter-hook

Weekly Downloads

31

Version

3.1.2

License

MIT

Unpacked Size

15.9 kB

Total Files

4

Last publish

Collaborators

  • alissanguyen