Repository files navigation

A simple animated number for React, usinganime.

Live demohere

$ npm install animated-number-react# OR$ yarn add animated-number-react

importAnimatedNumberfrom"animated-number-react";exportdefaultclassAppextendsComponent{state={value:150,};handleChange=({target:{ value}})=>{this.setState({ value});};formatValue=(value)=>value.toFixed(2);render(){return(<div><inputtype="number"onChange={this.handleChange}value={this.state.value}/><AnimatedNumbervalue={this.state.value}formatValue={this.formatValue}/></div>);}}

View demo here

Followingprops are used while initialization

Note : Onlyvalue is a required prop. Others are optional

Execute a function at the beginning, during or when an animation or timeline is completed.

formatValue() is used to format the animatedValue.

update() is called on every frame while the instance is playing.

begin() is called once after the delay is finished.

Check if the animation has begun withmyAnimation.began, returntrue orfalse.

run() is called every frame after the delay is finished.

complete() is called once after the animation is finished.