{"id":26035634,"url":"https://github.com/leocardoso94/animated-number-react","last_synced_at":"2025-04-07T12:05:10.400Z","repository":{"id":32587483,"uuid":"137616160","full_name":"Leocardoso94/animated-number-react","owner":"Leocardoso94","description":"Super easy way to animate numbers with React","archived":false,"fork":false,"pushed_at":"2023-01-25T23:59:35.000Z","size":729,"stargazers_count":104,"open_issues_count":33,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T14:01:52.765Z","etag":null,"topics":["animated-number","animation","react","react-animations","react-library","react-number-input"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Leocardoso94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2018-06-16T23:13:49.000Z","updated_at":"2024-10-31T17:10:19.000Z","dependencies_parsed_at":"2023-02-14T12:31:48.145Z","dependency_job_id":null,"html_url":"https://github.com/Leocardoso94/animated-number-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leocardoso94%2Fanimated-number-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leocardoso94%2Fanimated-number-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leocardoso94%2Fanimated-number-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leocardoso94%2Fanimated-number-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Leocardoso94","download_url":"https://codeload.github.com/Leocardoso94/animated-number-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648976,"owners_count":20972945,"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":["animated-number","animation","react","react-animations","react-library","react-number-input"],"created_at":"2025-03-07T05:11:53.975Z","updated_at":"2025-04-07T12:05:10.378Z","avatar_url":"https://github.com/Leocardoso94.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# animated-number-react\n\n![npm](https://img.shields.io/npm/dt/animated-number-react.svg) [![Build Status](https://travis-ci.org/Leocardoso94/animated-number-react.svg?branch=master)](https://travis-ci.org/Leocardoso94/animated-number-react) [![](https://data.jsdelivr.com/v1/package/npm/animated-number-react/badge)](https://www.jsdelivr.com/package/npm/animated-number-react) ![](https://img.badgesize.io/leocardoso94/animated-number-react/master/dist/AnimatedNumber.umd.min.js)\n\n\u003e A simple animated number for React, using [anime](https://github.com/juliangarnier/anime).\n\n\u003e Live demo [here](https://codesandbox.io/s/1z7nw5rnp3)\n\n![](https://media.giphy.com/media/iMQAMgUSFrh7X2xBCZ/giphy.gif)\n\n## Usage\n\n```bash\n$ npm install animated-number-react\n# OR\n$ yarn add animated-number-react\n```\n\n```jsx\nimport AnimatedNumber from \"animated-number-react\";\n\nexport default class App extends Component {\n  state = {\n    value: 150,\n  };\n  handleChange = ({ target: { value } }) =\u003e {\n    this.setState({ value });\n  };\n  formatValue = (value) =\u003e value.toFixed(2);\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cinput\n          type=\"number\"\n          onChange={this.handleChange}\n          value={this.state.value}\n        /\u003e\n        \u003cAnimatedNumber\n          value={this.state.value}\n          formatValue={this.formatValue}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n[View demo here](https://codesandbox.io/s/1z7nw5rnp3)\n[![Edit animated-number-react](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/1z7nw5rnp3)\n\n## Props\n\nFollowing `props` are used while initialization\n\n\u003e Note : Only `value` is a required prop. Others are optional\n\n| Prop Name              | Type              | Description                                                                                    | Default Value |\n| ---------------------- | ----------------- | ---------------------------------------------------------------------------------------------- | ------------- |\n| value `(required)`     | [ Number, String] | number that will be animated                                                                   |               |\n| duration `(optional)`  | Number            | the duration of animation                                                                      | 1000          |\n| delay `(optional)`     | Number            | the delay of animation                                                                         | 0             |\n| className `(optional)` | String            | an className to add to the span                                                                | null          |\n| easing `(optional)`    | String            | you can found all valid values [here](https://github.com/juliangarnier/anime#easing-functions) | 'linear'      |\n\n#### Callbacks props\n\nExecute a function at the beginning, during or when an animation or timeline is completed.\n\n| Names       | Types    | Arguments          | Info                                               |\n| ----------- | -------- | ------------------ | -------------------------------------------------- |\n| formatValue | Function | value `Number`     | A function that will manipulate the animated value |\n| update      | Function | animation `Object` | Called at time = 0                                 |\n| run         | Function | animation `Object` | Called after delay is finished                     |\n| begin       | Function | animation `Object` | Called after animation delay is over               |\n| complete    | Function | animation `Object` | Called only after all the loops are completed      |\n\n### Format Value\n\n`formatValue()` is used to format the animatedValue.\n\n### Update\n\n`update()` is called on every frame while the instance is playing.\n\n### Begin\n\n`begin()` is called once after the delay is finished.\n\nCheck if the animation has begun with `myAnimation.began`, return `true` or `false`.\n\n### Run\n\n`run()` is called every frame after the delay is finished.\n\n### Complete\n\n`complete()` is called once after the animation is finished.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleocardoso94%2Fanimated-number-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleocardoso94%2Fanimated-number-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleocardoso94%2Fanimated-number-react/lists"}