Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/samarmohan/react-text-loop-next
Animate words in your headings
https://github.com/samarmohan/react-text-loop-next
animation frontend javascript nodejs react typescript
Last synced: 2 days ago
JSON representation
Animate words in your headings
- Host: GitHub
- URL: https://github.com/samarmohan/react-text-loop-next
- Owner: samarmohan
- License: mit
- Created: 2021-08-06T17:21:29.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-04T16:23:53.000Z (almost 2 years ago)
- Last Synced: 2024-12-15T13:06:44.676Z (9 days ago)
- Topics: animation, frontend, javascript, nodejs, react, typescript
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-text-loop-playground-br4q1
- Size: 1.88 MB
- Stars: 147
- Watchers: 0
- Forks: 23
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## react-text-loop-next
An animated loop of text nodes for your headings. Uses
[react-motion](https://github.com/chenglou/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`](https://github.com/braposo/react-text-loop).
Used by [ant-design](https://github.com/ant-design/ant-design)!
Thanks to [@braposo]((https://github.com/braposo) 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
`npm install react-text-loop-next` or `yarn add react-text-loop-next`
## How to use
[![Edit react-text-loop-next][codesandbox-badge]][codesandbox]
You can also run the examples by cloning the repo and running `yarn start`.
### Usage
```jsx
import { TextLoop } from "react-text-loop-next";
const App = () => {
return (
First item
Second item
Third item
{" "}
and something else.
);
};
```
### 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](https://github.com/chenglou/react-motion#--spring-val-number-config-springhelperconfig--opaqueconfig) |
| 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 `` 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
```
## Examples
### Fast transition
```jsx
...
```
### Wobbly animation
```jsx
...
```
For many other examples, please have a look at the [CodeSandbox playground][codesandbox].
## Contributing
Please follow our
[contributing guidelines](https://github.com/braposo/react-text-loop-next/blob/master/CONTRIBUTING.md).
## License
[MIT](https://github.com/braposo/react-text-loop-next/blob/master/LICENSE)
[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