@pr0gramm/react-text-loop

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!

Installation

Some commands for you to copy:

npm i @pr0gramm/react-text-loop

yarn add @pr0gramm/react-text-loop

bun add @pr0gramm/react-text-loop

How to use

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

Usage

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

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.

License

MIT