1.0.2 • Published 1 year ago
numbers-animation-react v1.0.2
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;