1.0.0 • Published 3 years ago
react-text-swap v1.0.0
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
1.0.0
3 years ago