@pr0gramm/react-text-loop

@pr0gramm/react-text-loop

!text-loop2

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 and samarmohan for creating the original!

[![npm version][version-badge]][npm]
[![npm downloads][downloads-badge]][npm]
[![MIT License][license-badge]][license]
[![PRs Welcome][prs-badge]][prs]

---

Installation

Some commands for you to copy:
``sh
npm i @pr0gramm/react-text-loop
`
`sh
yarn add @pr0gramm/react-text-loop
`
`sh
bun add @pr0gramm/react-text-loop
`

How to use

You can also run the examples by cloning the repo and running npm start.

$3

`jsx
import { TextLoop } from "@pr0gramm/react-text-loop";

const App = () => {
return (

First item
Second item

Third item

{" "}
and something else.

);
};
`

$3

| 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) |

$3

Because loops through its children nodes, only root-level nodes will be considered so
doing something like:

`jsx




First item
Second item


Third item


`

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.

`jsx
children={[
"Trade faster",
"Increase sales",
"Stock winners",
"Price perfectly",
]}
/>
`

Examples

$3

!text-loop-fast-small

`jsx
...
`

$3

!text-loop-bouncy

`jsx
...
``

For many other examples, please have a look at the [CodeSandbox playground][codesandbox].

Contributing

Please follow our
contributing guidelines.

License

MIT

[npm]: https://www.npmjs.com/package/react-text-loop-next
[license]: https://github.com/braposo/react-text-loop-next/blob/master/LICENSE
[prs]: http://makeapullrequest.com
[size]: https://unpkg.com/react-text-loop-next/dist/react-text-loop-next.min.js
[version-badge]: https://img.shields.io/npm/v/react-text-loop-next.svg?style=flat-square
[downloads-badge]: https://img.shields.io/npm/dm/react-text-loop-next.svg?style=flat-square
[license-badge]: https://img.shields.io/npm/l/react-text-loop-next.svg?style=flat-square
[modules-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[codesandbox-badge]: https://codesandbox.io/static/img/play-codesandbox.svg
[codesandbox]: https://codesandbox.io/s/react-text-loop-next-playground-br4q1