numbers-animation-react

Props

| Name | Type | Default | Description | | ----------------- | ------- | ------- | ---------------------------------------------------------------------------------------------------------------- | | value | number | none | Value for the animation to end at | | startValue? | number | 0 | Animation starting value, if startValue is lower than value animation will increment otherwise it will decrement | | duration? | number | 1000 | Duration for the animation (milliseconds) | | generateCommas? | boolean | false | Returns the number with commas | | generateDecimals? | boolean | false | Returns the number with 2 decimals |

Example

import React from "react";
import AnimatedNumber from "numbers-animation-react";

function App() {
  return (
    <span>
      <AnimatedNumber
        value={10000}
        startValue={100000}
        duration={1000}
        generateCommas={true}
        generateDecimals={true}
      />
    </span>
  );
}

export default App;

Example 2

import React, { useState, useEffect } from "react";
import AnimatedNumber from "numbers-animation-react";

function App() {
  const [animateTo, setAnimateTo] = useState(0);
  const [animateFrom, setAnimateFrom] = useState(1000);

  useEffect(() => {
    /* 
    Set the animateFrom to the previous value of animateTo every time animateTo changes
    so it will increment / decrement based on a previous value rather than 0 or fixed specified value
    */
    setAnimateFrom(animateTo);
  }, [animateTo]);

  return (
    <span>
      <AnimatedNumber
        value={animateTo}
        startValue={animateFrom}
        duration={1000}
        generateCommas={true}
        generateDecimals={true}
      />
    </span>
  );
}

export default App;