React Effect Typewriter

react-effect-typewriter is a lightweight and highly customizable React library that allows you to create captivating typewriter effects. The library's primary focus is on simplicity, customizability, SEO-friendliness and accessibility, ensuring that you can deliver engaging text animations while maintaining best coding practices.

The package comprises two main components - Paragraph and Container. The Paragraph component animates your text to appear one character at a time, and the Container component, a wrapper component, can hold multiple Paragraph components or other nested Container components to create more complex animations.

Installation

1npm install react-effect-typewriter

Usage

All you need to start using the library is importing it & using the Paragraph element & it'll immediately give you the effect, see the code below:

1import * as Typewriter from "react-effect-typewriter";
2
3const App = () => {
4  return <Typewriter.Paragraph>Hello Typewriter!</Typewriter.Paragraph>;
5};

Under the hood, the Typewriter.Paragraph is a normal <p> element, so you can pass to it any props you can normal pass to a <p> element like className, id, onClick, ...etc.

In addition to that, there are a couple of custom props that you can use to customize the effect. These options are:

Parameter	Description	Default Value
typingSpeed?	(Optional) The speed with which the characters are typed. Defined in milliseconds.	50
startAnimation?	(Optional) If true, will start animation on mount, otherwise will wait for the prop value to become true.	true
onStart?	(Optional) A callback that is triggered when the typing animation starts.	-
onEnd?	(Optional) A callback that is triggered when the typing animation ends.	-
onCancel?	(Optional) A callback that is triggered if the typing animation is cancelled.	-
onCharacter?	(Optional) A callback that is triggered each time a character is typed. The typed character is passed as an argument to this function.	-

Nesting Paragraphs

By default, the Paragraph element will start its animation as soon as it mounts on the DOM. However, you might have multiple paragraphs & you only want a paragraph to start appearing once the previous paragraphs have fully appeared, or you want them to only appear once a certain condition is met, for that, there is another element which is the Typewriter.Container element.

The Container element will make all its Paragraph children (doesn't have to be direct) only animate one after the other, based on the order of their appearance in the tree. It can also have another Container component as a children, so it will wait for the child Container to finish all its nested children before moving to other elements.

Example Usage:

1import * as Typewriter from "react-effect-typewriter";
2
3function App() {
4  return (
5    <Typewriter.Container>
6      <Typewriter.Paragraph>This will appear #1</Typewriter.Paragraph>
7      <Typewriter.Container>
8        <Typewriter.Paragraph>This will appear #2</Typewriter.Paragraph>
9        <Typewriter.Paragraph typingSpeed={20}>
10          This will appear #3
11        </Typewriter.Paragraph>
12      </Typewriter.Container>
13      <Typewriter.Paragraph typingSpeed={20}>
14        This will appear #4
15      </Typewriter.Paragraph>
16    </Typewriter.Container>
17  );
18}

The Container component can take the following props:

Parameter	Description	Default Value
typingSpeed?	(Optional) The speed with which the characters are typed. Defined in milliseconds.	-
startAnimation?	(Optional) If true, will start animation on mount, otherwise will wait for the prop value to become true.	true
delayBetweenElements?	(Optional) The delay between the start of the animation of each child element. Defined in milliseconds.	0

How the effect is created

I've written a vanilla CSS/Javascript article a while ago explaining the core idea behind creating this effect in an accessible way, you can check this article here: How to create a typewriter effect that is accessible & SEO friendly

Feedback

If you have any feedback or suggestions for improvement, please feel free to open an issue or submit a pull request on GitHub. We appreciate your contributions!