React-typewritter NPM

React Typewriter

This library is an implementation of a typewriter effect.

Usage

`TypeWriter` component

To use the <TypeWriter>component, you need pass it the following props:

Name	Type	Default	Description
elementType	`string`	`required`	Is the element to render
text	`string`	`required`	A string to apply the effect..
interval	`number (optional)`	`20`	The interval between character writed
classNames	`string (optional)`	`""`	ClassName to add to the Element created
delay	`number (optional)`	`0`	A number indicating the delay in milliseconds to start to write

Example:

import { TypeWriter } from "./components/TypeWriter";

export const Example = () => {
  return (
    <TypeWriter elementType="p" text={`Hello world, \n\n This is a test`} />
  );
};

`TypeWriterInView` component

To use the <TypeWriterInView>component, the principal diference between the normal is that it uses the library react-intersection-observer for show the element when is in the viewport . You need pass it the following props:

Name	Type	Default	Description
elementType	`string`	`required`	Is the element to render
text	`string`	`required`	A string to apply the effect..
interval	`number (optional)`	`20`	The interval between character writed
classNames	`string (optional)`	`""`	ClassName to add to the Element created
delay	`number (optional)`	`0`	A number indicating the delay in milliseconds to start to write

Example:

import { TypeWriterInView } from "./components/TypeWriterInView";

export const Example = () => {
  return (
    <TypeWriterInView
      elementType="p"
      text={`Hello world, \n\n This is a test`}
    />
  );
};

Built With

React - A JavaScript library for building user interfaces
TypeScript - A superset of JavaScript that adds optional static typing
Vite - A development server that allows for instant development and hot-module replacement