Package Exports

typerio-react
typerio-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (typerio-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Typerio React ⌨️

GitHub package.json version GitHub License

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!).

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