"use client";

import * as React from "react";
import { animate, useMotionValue, useMotionValueEvent } from "framer-motion";
import { cn } from "@/lib/utils";

interface AnimatedCounterProps extends React.HTMLAttributes<HTMLSpanElement> {
  value: number;
  from?: number;
  duration?: number;
  delay?: number;
  decimals?: number;
  formatted?: boolean;
  prefix?: string;
  suffix?: string;
  easing?: "linear" | "easeIn" | "easeOut" | "easeInOut";
  onComplete?: () => void;
}

const easingMap: Record<NonNullable<AnimatedCounterProps["easing"]>,
  "linear" | "easeIn" | "easeOut" | "easeInOut"> = {
  linear: "linear",
  easeIn: "easeIn",
  easeOut: "easeOut",
  easeInOut: "easeInOut",
};

function AnimatedCounter({
  value,
  from = 0,
  duration = 2000,
  delay = 0,
  decimals = 0,
  formatted = true,
  prefix,
  suffix,
  easing = "easeOut",
  onComplete,
  className,
  ...props
}: AnimatedCounterProps) {
  const motionValue = useMotionValue(from);
  const [displayValue, setDisplayValue] = React.useState(from);

  useMotionValueEvent(motionValue, "change", (latest) => {
    setDisplayValue(latest);
  });

  React.useEffect(() => {
    motionValue.set(from);
    const controls = animate(motionValue, value, {
      duration: duration / 1000,
      delay: delay / 1000,
      ease: easingMap[easing],
      onComplete,
    });

    return () => controls.stop();
  }, [value, from, duration, delay, easing, onComplete, motionValue]);

  const formattedValue = React.useMemo(() => {
    const rounded =
      decimals > 0
        ? displayValue.toFixed(decimals)
        : Math.round(displayValue).toString();

    if (!formatted) return rounded;

    if (decimals === 0) {
      return Number(rounded).toLocaleString();
    }

    const [intPart, decPart] = rounded.split(".");
    return `${Number(intPart).toLocaleString()}.${decPart}`;
  }, [displayValue, decimals, formatted]);

  return (
    <span className={cn("tabular-nums", className)} {...props}>
      {prefix && <span className="text-muted-foreground">{prefix}</span>}
      {formattedValue}
      {suffix && <span className="text-muted-foreground">{suffix}</span>}
    </span>
  );
}

export { AnimatedCounter };
export type { AnimatedCounterProps };
Animated Counter

Dependencies

Files

Installation
