{"id":15292550,"url":"https://github.com/heyman333/react-animated-numbers","last_synced_at":"2025-04-12T23:34:30.014Z","repository":{"id":38357237,"uuid":"289142943","full_name":"heyman333/react-animated-numbers","owner":"heyman333","description":"👾 Library showing animation of number changes in react.js","archived":false,"fork":false,"pushed_at":"2025-03-31T09:28:59.000Z","size":790,"stargazers_count":278,"open_issues_count":11,"forks_count":32,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T23:34:16.711Z","etag":null,"topics":["animation","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"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/heyman333.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-21T00:54:16.000Z","updated_at":"2025-04-01T11:48:42.000Z","dependencies_parsed_at":"2024-01-27T01:44:27.929Z","dependency_job_id":null,"html_url":"https://github.com/heyman333/react-animated-numbers","commit_stats":{"total_commits":61,"total_committers":7,"mean_commits":8.714285714285714,"dds":"0.24590163934426235","last_synced_commit":"e48c9cd3c842b7b385a8343f4d7297ca68517054"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-animated-numbers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-animated-numbers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-animated-numbers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heyman333%2Freact-animated-numbers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heyman333","download_url":"https://codeload.github.com/heyman333/react-animated-numbers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647259,"owners_count":21139081,"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","react"],"created_at":"2024-09-30T16:18:45.087Z","updated_at":"2025-04-12T23:34:29.981Z","avatar_url":"https://github.com/heyman333.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ca href=\"https://www.npmjs.com/package/react-animated-numbers\"\u003e\n\u003cimg alt=\"npm version\" src=\"http://img.shields.io/npm/v/react-animated-numbers.svg?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-animated-numbers\"\u003e\n\u003cimg src=\"http://img.shields.io/npm/dm/react-animated-numbers.svg?style=flat-square\"\u003e\n\u003c/a\u003e\n\n# react-animated-numbers\n\nLibrary showing animation of number changes in react.js\n\n## Props\n\n|      name       |               type               | default | description                                                                                                                                    |\n| :-------------: | :------------------------------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------------------------- |\n| animateToNumber |              number              |  none   | Number to be animated                                                                                                                          |\n|    fontStyle    |       React.CSSProperties?       |  none   | Style of number text                                                                                                                           |\n|  includeComma   |             boolean?             |  false  | A value that determines whether to show a comma or not.                                                                                        |\n|     locale      |             string?              |  en-US  | Formats animated number as per locale. Also it should be used with `inculdeComma` prop. For list of locales, search for \"BCP 47 language tags\" |\n|   transitions   | (index: number) =\u003e Transition$1? |  none   | framer-motion [transitions](https://www.framer.com/motion/transition/). The order of numbers shown is passed as a parameter.                   |\n|    className    |             string?              |  none   | ClassName for style                                                                                                                            |\n\n### Next JS (\u003c v13.x.x )\n\nYou have to use dynamic imports to ensure that this library is imported on the client side only.\n\nImport the library like this:\n\n```\nimport dynamic from \"next/dynamic\";\nconst AnimatedNumbers = dynamic(() =\u003e import(\"react-animated-numbers\"), {\n  ssr: false,\n});\n```\n\nCredit to @jedwardblack for [this](https://github.com/heyman333/react-animated-numbers/issues/40)\n\n### Next JS (\u003e= v13.x.x )\n\nUse the library like this:\n\n```\n\"use client\";\n\nimport AnimatedNumbers from \"react-animated-numbers\"\n```\n\n### Example\n\n```jsx\nimport React from \"react\";\nimport AnimatedNumbers from \"react-animated-numbers\";\nimport \"./App.css\";\n\nfunction App() {\n  const [num, setNum] = React.useState(331231);\n  return (\n    \u003cdiv className=\"container\"\u003e\n      \u003cAnimatedNumbers\n        includeComma\n        className={styles.container}\n        transitions={(index) =\u003e ({\n          type: \"spring\",\n          duration: index + 0.3,\n        })}\n        animateToNumber={number}\n        fontStyle={{\n          fontSize: 40,\n          color: \"red\",\n        }}\n      /\u003e\n      \u003cdiv\u003e\n        \u003cbutton onClick={() =\u003e setNum((state) =\u003e state + 31234)}\u003e+\u003c/button\u003e\n        \u003cbutton onClick={() =\u003e setNum((state) =\u003e state - 31234)}\u003e-\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### GIF\n\n![test](./images/sample.gif)\n\n## Todo\n\n- [ ] test code\n- [x] start animation when dom is visible\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheyman333%2Freact-animated-numbers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheyman333%2Freact-animated-numbers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheyman333%2Freact-animated-numbers/lists"}