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

Dependencies

• react-intersection-observer - A React component for the Intersection Observer API