React-animated-digits-component NPM

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)"}>
    )
}

react typescript npm

uuid

@infinitebrahmanuniverse/nolb-react-an @everything-registry/sub-chunk-2539

1.0.1

5 years ago

1.0.0

5 years ago