https://github.com/josephgoksu/easy-react-text-loop
easy-react-text-loop is a React component that allows you to easily create text loops with a nice fade animation.
https://github.com/josephgoksu/easy-react-text-loop
animation-library easy-text-loop react react-library text-loop
Last synced: 8 months ago
JSON representation
easy-react-text-loop is a React component that allows you to easily create text loops with a nice fade animation.
- Host: GitHub
- URL: https://github.com/josephgoksu/easy-react-text-loop
- Owner: josephgoksu
- License: mit
- Created: 2023-07-02T19:59:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-02T21:27:47.000Z (over 2 years ago)
- Last Synced: 2025-06-09T14:13:00.201Z (9 months ago)
- Topics: animation-library, easy-text-loop, react, react-library, text-loop
- Language: TypeScript
- Homepage: https://josephgoksu.com/products
- Size: 1.41 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Easy React Text Loop
easy-react-text-loop is a React component that allows you to easily create text loops with a nice fade animation.
[![module formats: umd, cjs, and esm][modules-badge]][size]
[![npm version][version-badge]][npm]
[![npm downloads][downloads-badge]][npm]
[![MIT License][license-badge]][license]
[![PRs Welcome][prs-badge]][prs]
---
## Installation
```bash
npm install --save easy-react-text-loop
```
or
```bash
yarn add easy-react-text-loop
```
or
```bash
pnpm add easy-react-text-loop
```
### Usage
```jsx
import { TextLoop } from "easy-react-text-loop";
const App = () => {
return (
I will loop through these words:{" "}
hello
world
everyone
{" "}
and then start again!
);
};
```
### Props
| Prop | Type | Default | Definition |
| --------- | --------------- | ------- | ------------------------------------------------------- |
| interval | number \| array | `2500` | The frequency (in ms) that the words change. |
| children | node | | The words you want to loop (required) |
| animation | enum | `spring` | Animation type |
## Contributing
Please follow our
[contributing guidelines](https://github.com/josephgoksu/easy-react-text-loop/blob/main/CONTRIBUTING.md).
## License
[MIT](https://github.com/braposo/easy-react-text-loop/blob/master/LICENSE)
[npm]: https://www.npmjs.com/package/easy-react-text-loop
[license]: https://github.com/braposo/easy-react-text-loop/blob/master/LICENSE
[prs]: http://makeapullrequest.com
[size]: https://unpkg.com/easy-react-text-loop/dist/easy-react-text-loop.min.js
[version-badge]: https://img.shields.io/npm/v/easy-react-text-loop.svg?style=flat-square
[downloads-badge]: https://img.shields.io/npm/dm/easy-react-text-loop.svg?style=flat-square
[license-badge]: https://img.shields.io/npm/l/easy-react-text-loop.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/easy-react-text-loop-playground-br4q1
## Author
- [Joseph Goksu](https://josephgoksu.com/)
I inspired from **react-text-loop** and **easy-react-text-loop** and I wanted to make it easier to use. I hope you like it.