@figliolia/react-animated-number
v1.0.1
Published
A react component that animates between numeric values
Downloads
128
Maintainers
Readme
Animated Number
A react component that animates between numeric values!
Installation
npm i @figliolia/react-animated-number
# or
yarn add @figliolia/react-animated-number
Basic Usage
To animate numeric values and transition them between one another simply import the AnimatedNumber
component.
import { AnimatedNumber } from "@figliolia/react-animated-number";
export const LiveNumericValue = ({ value }: {
value: string | number
}) => {
return (
<AnimatedNumber
delay={0}
value={value}
duration={1500}
timingFunction="cubic-bezier(0.33, 1, 0.68, 1)" />
);
}
You may choose to wrap this component in h1, h2, p, etc
tags to inherit the font-sizes, weights, and styling of your application.