# @antonkolesnik/counter

> React number increase/decrease animation

Latest version **1.1.0** (published 2024-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @antonkolesnik/counter
pnpm add @antonkolesnik/counter
yarn add @antonkolesnik/counter
bun add @antonkolesnik/counter
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-12-07 |
| First published | 2024-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=16 |
| Dependencies | 1 |
| Unpacked size | 21.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Anton Kolesnik |
| Maintainers | antonkolesnik |
| Keywords | react, count-up, countdown, counter, animation, react-counter, react-numeric, react-animation, smooth-transition, number-animation, numeric-animation, animated-countdown |

## Links

- npm: https://www.npmjs.com/package/@antonkolesnik/counter
- Repository: https://github.com/kolesnikanton/counter
- Homepage: https://antonkolesnik.com/counter
- Issues: https://github.com/kolesnikanton/counter/issues
- npm.io page: https://npm.io/package/@antonkolesnik/counter

## Dependencies (1)

- [@antonkolesnik/utils](https://npm.io/package/@antonkolesnik/utils.md) ^1.0.0-beta.4

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2024-12-07

## README

# Counter
A React library for animating numeric transitions. Perfect for timers, counters, or progress displays.

* Animate numbers with increasing (start < end) or decreasing (start > end) values.
* Works with decimal numbers

![Animation](https://raw.githubusercontent.com/kolesnikanton/counter/master/static/animation.gif)

## Demo
See demo [HERE](https://antonkolesnik.com/counter)

## Props
| Name          | Type                           | Default Value | Description                                          |
|---------------|--------------------------------|---------------|------------------------------------------------------|
| duration      | number (required)              | -             | Duration of the animation in milliseconds.           |
| start         | string                         | `0`           | Initial number.                                      |
| end           | string                         | `0`           | Final number.                                        |
| fontSize      | number                         | 80            | Font size for of counter text (in pixels).           |
| decimals      | number                         | -             | Number of decimal places to display.                 |
| onUpdate      | (nextValue: string) => void    | -             | Callback function to get next counter value.         |
| isStart       | boolean                        | null          | To manually start the counter.                       |
| className     | string                         | -             | CSS class name for custom styling.                   |
| withAnimation | boolean                        | false         | Enables smooth transition animation for the counter. |

## Installation

#### Install with NPM
```bash
npm install @antonkolesnik/counter
```
#### Install with Yarn
```bash
yarn add @antonkolesnik/counter
```

## Stylesheets
```js
import '@antonkolesnik/counter/lib/styles.css';
```

## Usage
```js
import Counter from '@antonkolesnik/counter';
import '@antonkolesnik/counter/lib/styles.css';

const Demo = () => (
  <>
    <Counter start="100" duration={10000} fontSize={50} />
    <Counter end="500" duration={10000} />
    <Counter start="200" end="50" duration={10000} />
    <Counter start="100" end="200" duration={10000} />
    <Counter start="1.20" end="10.5" duration={10000} decimals={1} />
    <Counter start="200" end="100" duration={100000} withAnimation />
    <Counter end="100" duration={10000} isStart={isStartState} />
    <Counter end="100" duration={10000} onUpdate={(nextVal) => {console.log(nextVal)}} />
  </>
);
```

---
_Source: https://npm.io/package/@antonkolesnik/counter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._