Vue Animated Counter

A lightweight React component for beautifully animated incrementation & decrementation of a state integer value. Inspired by react-animated-counter counter.

Powering today's most innovative web applications like https://kalshi.com, https://financhle.com, and others.

Installation

yarn add animated-counter-vue

Usage

Props:

| Name | Type | Description | Default | |------------------|-----------------|-----------------------------------------------------------------------------------------------------------------------------|----------------| | value | integer | The state integer value | 0 | | fontSize | string | Applied css font-size | 18px | | color | string | Applied css color | black | | incrementColor | string | Animation color when value increases | #32cd32 | | decrementColor | string | Animation color when value decreases | #fe6862 | |includeDecimals | boolean | Includes or removes decimal point values in provided value (rounds to nearest hundredth by default) | true | |decimalPrecision| boolean | The nth decimal place of precision (ex. 5 will calculate number to the nearest hundred thousandth) | 2 | |includeCommas | boolean | Adds comma separators to every third digit to the left of the decimal point used in numbers with four or more digits | false | |containerStyles | CSSProperties | Styles to apply to the parent element of the main component. Used in same fashion as react styles | {} | |digitStyles | CSSProperties | Styles to apply to individual digit elements. Used in same fashion as react styles | {} |

Basic Demo:

Codesandbox Link: https://codesandbox.io/p/sandbox/gg3tvl

<script setup lang="ts">
import AnimatedCounter from 'animated-counter-vue';
import { ref } from 'vue';
  
const value = ref(50);
</script>

<template>
  <main>
    <AnimatedCounter
      :value="value"
      :include-commas="false"
      :include-decimals="false"
      :digit-styles="{
        fontWeight: 600,
        lineHeight: '1',
        display: 'inline-block',
        letterSpacing: '-0.02em',
      }"
      :container-styles="{
        gap: '0.05em',
        lineHeight: '1',
        alignItems: 'center',
        display: 'inline-flex',
        flexDirection: 'row-reverse',
      }"
      color="currentColor"
      font-size="24px"
      increment-color="currentColor"
      decrement-color="currentColor"
    ></AnimatedCounter>

    <div>
      <button @click="value--">Decrement</button>
      
      <button @click="value++">Increment</button>
    </div>
  </main>
</template>

Output:

With recharts Demo:

Codesandbox Link: https://codesandbox.io/s/suspicious-morning-rx60sm?file=/src/App.js

Output: