Typerio React ⌨️

Typerio React is an React port of Typerio written in TypeScript - a lightweight, simple, highly configurable and easy to use npm package that creates a character-by-character output effect (just like in a terminal!).

Getting started

• How to install📩
• How to use🤷‍♂️
  • TypeScript🧩
• Example code👀

How to install 📩

$ npm i typerio-react

How to use 🤷‍♂️

At first, import the component.

import { Typerio } from "typerio-react";

Then prepare an array with objects with your phrase.

const arrayOfObjects = [
  {
    text: "Text to type", //This is the text you want to animate
    style: "class-of-the-element", //This is the css class of your element
    element: "p", //This is the HTML element of your text. You can use any element with text inisde
  },
];

All that remains is to declare configuration object.

const configurationObject = {
  frames: ["-", "|"], //This is the typing animation. It must be 2 elements array
  speed: 100, //Speed of the typing. Higher -> slower
};

And now you can simply call the component.

return (
  <>
    <Typerio input={[arrayOfObjects, configurationObject]} />
  </>
);

TypeScript 🧩

You can import types for phrase array and for configuration object.

import { TyperioInput, TyperioConfig } from "typerio-react/dist/Typerio";

Now you can use it with declaring them.

const arrayOfObjects: TyperioInput[] = [];
const configurationObject: TyperioConfig = {};

Example code 👀

import { Typerio } from "typerio-react";

const myComponent = () => {
  const arrayOfObjects = [
    {
      text: "Simple",
      style: "typerio",
      element: "h2",
    },
    {
      text: "text",
      style: "typerio",
      element: "h3",
    },
  ];

  const configurationObject = {
    frames: ["o", "O"],
    speed: 50,
  };

  return (
    <div>
      <h1>Typerio!</h1>
      <Typerio input={[arrayOfObjects, configurationObject]} />
    </div>
  );
};