{"id":19805344,"url":"https://github.com/samarmohan/react-text-loop-next","last_synced_at":"2025-04-05T18:09:37.976Z","repository":{"id":38533191,"uuid":"393449986","full_name":"samarmohan/react-text-loop-next","owner":"samarmohan","description":"Animate words in your headings","archived":false,"fork":false,"pushed_at":"2023-02-04T16:23:53.000Z","size":1970,"stargazers_count":148,"open_issues_count":2,"forks_count":23,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-29T17:09:59.080Z","etag":null,"topics":["animation","frontend","javascript","nodejs","react","typescript"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-text-loop-playground-br4q1","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samarmohan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-06T17:21:29.000Z","updated_at":"2025-03-12T16:03:05.000Z","dependencies_parsed_at":"2023-02-08T09:01:08.554Z","dependency_job_id":null,"html_url":"https://github.com/samarmohan/react-text-loop-next","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samarmohan%2Freact-text-loop-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samarmohan%2Freact-text-loop-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samarmohan%2Freact-text-loop-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samarmohan%2Freact-text-loop-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samarmohan","download_url":"https://codeload.github.com/samarmohan/react-text-loop-next/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378149,"owners_count":20929297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","frontend","javascript","nodejs","react","typescript"],"created_at":"2024-11-12T09:03:29.786Z","updated_at":"2025-04-05T18:09:37.944Z","avatar_url":"https://github.com/samarmohan.png","language":"TypeScript","readme":"## react-text-loop-next\n\n![text-loop2](https://cloud.githubusercontent.com/assets/38172/24254063/d5e9c38c-0fd9-11e7-9b75-46dc00421cd7.gif)\n\nAn animated loop of text nodes for your headings. Uses\n[react-motion](https://github.com/chenglou/react-motion) for the transition so it handles super fast\nanimations and spring params. \nIt's 6x smaller, maintained, but uses the same API as the original [`react-text-loop`](https://github.com/braposo/react-text-loop).\nUsed by [ant-design](https://github.com/ant-design/ant-design)!\nThanks to [@braposo]((https://github.com/braposo) for creating the original!\n\n[![npm version][version-badge]][npm]\n[![npm downloads][downloads-badge]][npm]\n[![MIT License][license-badge]][license]\n[![PRs Welcome][prs-badge]][prs]\n\n---\n\n## Installation\n\n`npm install react-text-loop-next` or `yarn add react-text-loop-next`\n\n## How to use\n\n[![Edit react-text-loop-next][codesandbox-badge]][codesandbox]\n\nYou can also run the examples by cloning the repo and running `yarn start`.\n\n### Usage\n\n```jsx\nimport { TextLoop } from \"react-text-loop-next\";\n\nconst App = () =\u003e {\n  return (\n    \u003ch2\u003e\n      \u003cTextLoop\u003e\n        \u003cspan\u003eFirst item\u003c/span\u003e\n        \u003ca href=\"/\"\u003eSecond item\u003c/a\u003e\n        \u003cp style={{ color: \"red\" }}\u003eThird item\u003c/p\u003e\n      \u003c/TextLoop\u003e{\" \"}\n      and something else.\n    \u003c/h2\u003e\n  );\n};\n```\n\n### Props\n\n| Prop           | Type            | Default                           | Definition                                                                                                                                                     |\n| -------------- | --------------- | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 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                                              |\n| 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.                          |\n| 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.                                          |\n| fade           | boolean         | `true`                            | Enable or disable the fade animation on enter and leave                                                                                                        |\n| mask           | boolean         | `false`                           | Mask the animation around the bounding box of the animated content                                                                                             |\n| 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. |\n| springConfig   | object          | `{ stiffness: 340, damping: 30 }` | Configuration for [react-motion spring](https://github.com/chenglou/react-motion#--spring-val-number-config-springhelperconfig--opaqueconfig)                  |\n| className      | string          |                                   | Any additional CSS classes you might want to use to style the image                                                                                            |\n| children       | node            |                                   | The words you want to loop (required)                                                                                                                          |\n\n### Caveats\n\nBecause `\u003cTextLoop\u003e` loops through its children nodes, only root-level nodes will be considered so\ndoing something like:\n\n```jsx\n\u003cTextLoop\u003e\n  \u003cdiv\u003e\n    \u003cspan\u003eFirst item\u003c/span\u003e\n    \u003cspan\u003eSecond item\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003eThird item\u003c/div\u003e\n\u003c/TextLoop\u003e\n```\n\nwill make first and second item to be treated as one and animate together.\n\nYou can also just send a normal array as children prop if you don't need any individual styling for\neach node.\n\n```jsx\n\u003cTextLoop\n  children={[\n    \"Trade faster\",\n    \"Increase sales\",\n    \"Stock winners\",\n    \"Price perfectly\",\n  ]}\n/\u003e\n```\n\n## Examples\n\n### Fast transition\n\n![text-loop-fast-small](https://cloud.githubusercontent.com/assets/38172/24275301/5d48c6e2-1026-11e7-85b8-e7cfe07f4714.gif)\n\n```jsx\n\u003cTextLoop interval={100}\u003e...\u003c/TextLoop\u003e\n```\n\n### Wobbly animation\n\n![text-loop-bouncy](https://cloud.githubusercontent.com/assets/38172/24275347/b0e45b2c-1026-11e7-8e04-04bdafdef249.gif)\n\n```jsx\n\u003cTextLoop springConfig={{ stiffness: 180, damping: 8 }}\u003e...\u003c/TextLoop\u003e\n```\n\nFor many other examples, please have a look at the [CodeSandbox playground][codesandbox].\n\n## Contributing\n\nPlease follow our\n[contributing guidelines](https://github.com/braposo/react-text-loop-next/blob/master/CONTRIBUTING.md).\n\n## License\n\n[MIT](https://github.com/braposo/react-text-loop-next/blob/master/LICENSE)\n\n[npm]: https://www.npmjs.com/package/react-text-loop-next\n[license]: https://github.com/braposo/react-text-loop-next/blob/master/LICENSE\n[prs]: http://makeapullrequest.com\n[size]: https://unpkg.com/react-text-loop-next/dist/react-text-loop-next.min.js\n[version-badge]: https://img.shields.io/npm/v/react-text-loop-next.svg?style=flat-square\n[downloads-badge]: https://img.shields.io/npm/dm/react-text-loop-next.svg?style=flat-square\n[license-badge]: https://img.shields.io/npm/l/react-text-loop-next.svg?style=flat-square\n[modules-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[codesandbox-badge]: https://codesandbox.io/static/img/play-codesandbox.svg\n[codesandbox]: https://codesandbox.io/s/react-text-loop-next-playground-br4q1\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamarmohan%2Freact-text-loop-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamarmohan%2Freact-text-loop-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamarmohan%2Freact-text-loop-next/lists"}