leocardoso94 / animated-number-react

Super easy way to animate numbers with React

Hello 🌎, I'm Leonardo 👋 🇧🇷

Co-founder at Luna

animated-number-react's Issues

Feature Request

I want the numbers to start animating when I scroll to the viewport of numbers . So when I scroll down and see the numbers it should start animating from zero but now when the page is reloaded and I scroll to the numbers viewport , the animation has been ended already .

[ Typescript ] Add support

Would you add Typescript support for this lib ? Please

Thank you for you work.

Starting from zero

Hi! Firstly, I want to thank you for such a great package. In my case, I animate numbers which come from Redux. Whenever one of the numbers is updated, the value starts counting up (or down) from zero. Could you please explain what the issue, or fix it?

Include commas in value

I've tried formatting the number with the following, but it doesn't look like commas are preserved during the animation. Any ideas how I can ensure the numbers include the commas?

formatValue = (value) => value.toFixed(0).toLocaleString( "en-US" );

Feature request

Can it have an option to stop reanimating the numbers once it's done animating once?

How can i add custom styles?

The only way is updated all span tag. But that affects my others span in the proyect.

Should i add styles to span with a selector? or there is cleaner way?

can't able to install types from npm

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fanimated-number-react - Not found
npm ERR! 404
npm ERR! 404 '@types/animated-number-react@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Can't perform a React state update on an unmounted component.

Unmounting a component while a number is animating causes the following error.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Is this a bug with this component, or something I need to resolve in my own app?

Infinite loop if value prop is set to 0

Offending code:

  updateValue = (anima) => {
    this.props.update(anima)
    const {animatedValue} = this.target
    this.setState({animatedValue})
  }

Should be:

  updateValue = (anima) => {
    this.props.update(anima)
    const {animatedValue} = this.target
    if (animatedValue !== this.state.animatedValue) {
      this.setState({animatedValue})
    }
  }

Any non elastic/linear easing's do not work

Any of the easing functions do not work.

<AnimatedNumber value={20} easing={'easeInQuart'} formatValue={(value) => {
    console.log(value)
    return value;
}}/>

Received value on formatValue is "0", during the animation it is "NaN" and at the complete it is "20".

Can't perform a React state update on an unmounted component error.

I got an "Can't perform a React state update on an unmounted component" error if i unmount component while animating number. For example when i switch to another page while animation is in process.

How to specify the number to start the animation?

There is a method to specify the number to start the counter? For example, if the value to reach is 3000, can I specify to start to animate from 2000 and perform only the animation on the last 1000 number?

Feature request

I've tried to partner this with numeral.js but e+0 format is not supported. It works on a normal number though. Can you add support on e+0 format?