React Text Swap

A lightweight React component for text swapping animations. No dependencies aside from react@^17.0.2 and react-dom@^17.0.2 (as peer dependencies -- if your project already uses React, this won't re-install it). Animations are CSS-based.

View Live Examples Here

Installation

npm install react-text-swap

or

yarn add react-text-swap

Usage

Import the <TextSwap> component with the following: import TextSwap from "react-text-swap";

It takes the following props:

prop name	type	required	default	description
strings	string[]	yes	undefined	The strings rendered by the component, which "swaps" between them.
seconds	number	no	2	The number of seconds that each animation loop should last.
animationType	string	no	"fade"	The type of animation to be used. Options are: "fade", "slideUp", "slideDown", or "blur"
fixedWidthInPx	number	no	undefined	If used, the rendered text will be wrapped in an inline-block <span> and assigned a width of the given value.
fixedAlign	string	no	"center"	When fixedWidthInPx is used, this prop is assigned to the text-align style field. Options are: "center", "left", and "right".

View Live Examples Here