1.0.1 • Published 3 years ago
react-animated-digits-component v1.0.1
REACT ANIMATED DIGITS COMPONENT
A react component to display digits in an animated way.
Check out the live demo of the component here
Installation
npm install react-animated-digits-component
You can import the component using
import Digits from "react-animated-digits-component";
You can also import the type definitions if you're using TypeScript like so:
import Digits, { DigitProps } from "react-animated-digits-component";
Available props
Prop | Type | Default | Description |
---|---|---|---|
previousValue | number | required | Initial value of the digit to start the animation from. |
currentValue | number | required | Final value of the digit while ending animation. |
animationSpeed | number | 0.6 | Speed of animation in seconds |
size | number | 24 | Size (width) of the whole digit in rem units |
digitColor | string | "black" | Color of the visible digits. It can take values like #fff or rgb(0,0,0). |
digitBorder | string | "" | Sets the border property of the digit. It can take values like 1px solid #fff |
circleBorder | string | "" | Sets the border property of the circles enclosing the rotating lines. It can take values like 1px solid #fff |
Examples
// your-component.js
import Digits from 'react-animated-digits-component'
function Example0(){
return (
<Digits previousValue={10} currentValue={200} digitColor={"green"} circleBorder={"2px solid pink"}>
)
}
// your-component.js
import Digits from 'react-animated-digits-component'
function Example1(){
return (
<Digits previousValue={10} currentValue={200} animationSpeed={1} digitColor={"rgb(0,0,0)"}>
)
}