1.0.0 • Published 1 year ago

@antonkolesnik/counter v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Counter

React number increase/decrease animation

  • Number increase animation (when start is less than end)
  • Number decrease animation (when start is greater than end)
  • Works with decimal numbers
  • Without repeat

Demo

See demo HERE

Props:

  • start (0 by default): A number to start the counter at
  • end (0 by default): A number to stop the counter at
  • duration (required): Time in ms to stop the counter
  • className: CSS class name to style the counter
  • fontSize (80 by default)
  • withAnimation: Smooth transition animation
  • decimals

Animation

Installation

Install with NPM

npm install @antonkolesnik/counter

Install with Yarn

yarn add @antonkolesnik/counter

Stylesheets

import '@antonkolesnik/counter/lib/styles.css';

Example:

import Counter from '@antonkolesnik/counter';
import '@antonkolesnik/counter/lib/styles.css';

const Demo = () => (
  <div>
    <Counter fontSize={50} start={100} duration={10000} />
    <Counter end={500} duration={10000} />
    <Counter start={200} end={50} duration={10000} />
    <Counter start={100} end={200} duration={10000} />
    <Counter start={1.2} end={10.5} duration={10000} />
    <Counter withAnimation fontSize={80} start={200} end={100} duration={100000} />
  </div>
);