{"_id":"@0kzh/react-text-loop-next","name":"@0kzh/react-text-loop-next","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.3":{"name":"@0kzh/react-text-loop-next","version":"0.0.3","description":"Create an animated loop of a list of text for your headings","main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/types/index.d.ts","sideEffects":false,"publishConfig":{"access":"public"},"scripts":{"build":"npm-run-all build:*","build:esm":"tsc -p tsconfig.esm.json","build:cjs":"tsc -p tsconfig.cjs.json","build:types":"tsc --declaration --emitDeclarationOnly --declarationDir dist/types","prebuild":"rimraf dist","start:examples":"parcel examples/index.html -d examples/dist --cache-dir examples/cache --open","lint":"npm-run-all lint:*","lint:src":"eslint . --fix","lint:types":"tsc --noEmit","prettier":"prettier --write .","prepublishOnly":"npm run test && npm run prettier && npm run lint && npm run build","quality":"npm run test && npm run prettier && npm run lint","test":"jest","test:coverage":"jest --coverage","prepare":"husky install","commit:signed":"git add -A && cz -S","commit":"git add -A && cz"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"repository":{"type":"git","url":"git+https://github.com/samarmohan/react-text-loop-next.git"},"keywords":["react","component","text","animation","loop","cycle","react","motion"],"author":{"name":"Samar Mohan","email":"samar.mohan@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/samarmohan/react-text-loop-next/issues"},"homepage":"https://github.com/samarmohan/react-text-loop-next#readme","devDependencies":{"@commitlint/cli":"^17.1.2","@commitlint/config-conventional":"^17.1.0","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@types/jest":"^29.2.0","@types/node":"^18.11.8","@types/react":"^18.0.24","@types/react-dom":"^18.0.8","@types/react-motion":"^0.0.33","@typescript-eslint/eslint-plugin":"^5.41.0","@typescript-eslint/parser":"^5.41.0","cz-conventional-changelog":"^3.3.0","eslint":"^8.26.0","eslint-config-prettier":"^8.5.0","eslint-plugin-import":"^2.26.0","eslint-plugin-jsx-a11y":"^6.6.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.10","eslint-plugin-react-hooks":"^4.6.0","husky":"^8.0.1","jest":"^29.2.2","jest-environment-jsdom":"^29.2.2","npm-run-all":"^4.1.5","prettier":"^2.7.1","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^3.0.2","ts-jest":"^29.0.3","ts-node":"^10.9.1","typescript":"^4.8.4"},"peerDependencies":{"react":"^17 || ^18","react-dom":"^17 || ^18"},"dependencies":{"cxs":"^6.2.0","react-motion":"^0.5.2"},"gitHead":"49a8d136522db2c99ab4d98d56a189d9e24ad5ac","_id":"@0kzh/react-text-loop-next@0.0.3","_nodeVersion":"19.3.0","_npmVersion":"9.2.0","dist":{"integrity":"sha512-FQOEXuRmhKiz5vRABKFTD7E5dZHWtXQ+5PHBtmBmC9gnbg3BcapfIaSRMIscPevYRPwRkND0cqSVi45cB8ryNw==","shasum":"e2601c8ee2f973104dd33a2f53ad5a828e489cd8","tarball":"https://registry.npmjs.org/@0kzh/react-text-loop-next/-/react-text-loop-next-0.0.3.tgz","fileCount":23,"unpackedSize":62935,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBXg1EKozzWgIlWBVlKSyxR1//xhDGbRKAVQGOwtDvzZAiEAzm+KJrB326Pdu32bG+PcFYDnrtKM3M7v/RHz6oeZSNo="}]},"_npmUser":{"name":"0kzh","email":"me@kelvinzhang.ca"},"directories":{},"maintainers":[{"name":"0kzh","email":"me@kelvinzhang.ca"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-text-loop-next_0.0.3_1698727306931_0.06766610424299513"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-31T04:41:46.827Z","0.0.3":"2023-10-31T04:41:47.121Z","modified":"2023-10-31T04:41:47.408Z"},"maintainers":[{"name":"0kzh","email":"me@kelvinzhang.ca"}],"description":"Create an animated loop of a list of text for your headings","homepage":"https://github.com/samarmohan/react-text-loop-next#readme","keywords":["react","component","text","animation","loop","cycle","react","motion"],"repository":{"type":"git","url":"git+https://github.com/samarmohan/react-text-loop-next.git"},"author":{"name":"Samar Mohan","email":"samar.mohan@gmail.com"},"bugs":{"url":"https://github.com/samarmohan/react-text-loop-next/issues"},"license":"MIT","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 = () => {\n return (\n

\n \n First item\n Second item\n

Third item

\n {\" \"}\n and something else.\n

\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 `` loops through its children nodes, only root-level nodes will be considered so\ndoing something like:\n\n```jsx\n\n
\n First item\n Second item\n
\n
Third item
\n\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\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...\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...\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","readmeFilename":"README.md"}