@quantfive/react-text-loop-next
v0.0.5
Published
Create an animated loop of a list of text for your headings
Downloads
106
Readme
react-text-loop-next
An animated loop of text nodes for your headings. Uses
react-motion for the transition so it handles super fast
animations and spring params.
It's 6x smaller, maintained, but uses the same API as the original react-text-loop
.
Used by ant-design!
Thanks to [@braposo]((https://github.com/braposo) for creating the original!
Installation
npm install react-text-loop-next
or yarn add react-text-loop-next
How to use
You can also run the examples by cloning the repo and running yarn start
.
Usage
import { TextLoop } from "react-text-loop-next";
const App = () => {
return (
<h2>
<TextLoop>
<span>First item</span>
<a href="/">Second item</a>
<p style={{ color: "red" }}>Third item</p>
</TextLoop>{" "}
and something else.
</h2>
);
};
Props
| Prop | Type | Default | Definition |
| -------------- | --------------- | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| interval | number | array | 3000
| The frequency (in ms) that the words change. Can also pass an array if you want a different interval per children |
| delay | number | 0
| A delay (in ms) for the animation to start. This allows to use multiple instances to create a staggered animation effect for example. |
| adjustingSpeed | number | 150
| The speed that the container around each word adjusts to the next one (in ms). Usually you don't need to change this. |
| fade | boolean | true
| Enable or disable the fade animation on enter and leave |
| mask | boolean | false
| Mask the animation around the bounding box of the animated content |
| noWrap | boolean | true
| Disable whitepace: nowrap
style for each element. This is used by default so we can always get the right width of the element but can have issues sometimes. |
| springConfig | object | { stiffness: 340, damping: 30 }
| Configuration for react-motion spring |
| className | string | | Any additional CSS classes you might want to use to style the image |
| children | node | | The words you want to loop (required) |
Caveats
Because <TextLoop>
loops through its children nodes, only root-level nodes will be considered so
doing something like:
<TextLoop>
<div>
<span>First item</span>
<span>Second item</span>
</div>
<div>Third item</div>
</TextLoop>
will make first and second item to be treated as one and animate together.
You can also just send a normal array as children prop if you don't need any individual styling for each node.
<TextLoop
children={[
"Trade faster",
"Increase sales",
"Stock winners",
"Price perfectly",
]}
/>
Examples
Fast transition
<TextLoop interval={100}>...</TextLoop>
Wobbly animation
<TextLoop springConfig={{ stiffness: 180, damping: 8 }}>...</TextLoop>
For many other examples, please have a look at the CodeSandbox playground.
Contributing
Please follow our contributing guidelines.