"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface NumberCounterProps extends React.HTMLAttributes<HTMLSpanElement> {
  /**
   * Target number to count to
   */
  value: number
  /**
   * Starting value
   * @default 0
   */
  from?: number
  /**
   * Animation duration in milliseconds
   * @default 2000
   */
  duration?: number
  /**
   * Prefix to display before the number (e.g., "$")
   */
  prefix?: string
  /**
   * Suffix to display after the number (e.g., "%", "+", "k")
   */
  suffix?: string
  /**
   * Number of decimal places
   * @default 0
   */
  decimals?: number
  /**
   * Use locale-specific number formatting (adds commas)
   * @default true
   */
  formatted?: boolean
  /**
   * Delay before starting animation (in milliseconds)
   * @default 0
   */
  delay?: number
  /**
   * Easing function
   * @default "easeOut"
   */
  easing?: "linear" | "easeIn" | "easeOut" | "easeInOut"
  /**
   * Callback when counting completes
   */
  onComplete?: () => void
}

const easingFunctions = {
  linear: (t: number) => t,
  easeIn: (t: number) => t * t * t,
  easeOut: (t: number) => 1 - Math.pow(1 - t, 3),
  easeInOut: (t: number) =>
    t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
}

function NumberCounter({
  value,
  from = 0,
  duration = 2000,
  prefix,
  suffix,
  decimals = 0,
  formatted = true,
  delay = 0,
  easing = "easeOut",
  onComplete,
  className,
  ...props
}: NumberCounterProps) {
  const [displayValue, setDisplayValue] = React.useState(from)
  const [hasCompleted, setHasCompleted] = React.useState(false)
  const frameRef = React.useRef<number | null>(null)
  const startTimeRef = React.useRef<number | null>(null)

  React.useEffect(() => {
    // Reset state when value changes
    setDisplayValue(from)
    setHasCompleted(false)
    startTimeRef.current = null

    const easeFn = easingFunctions[easing]

    const animate = (currentTime: number) => {
      if (startTimeRef.current === null) {
        startTimeRef.current = currentTime
      }

      const elapsed = currentTime - startTimeRef.current
      const progress = Math.min(elapsed / duration, 1)
      const easedProgress = easeFn(progress)

      const currentValue = from + (value - from) * easedProgress
      setDisplayValue(currentValue)

      if (progress < 1) {
        frameRef.current = requestAnimationFrame(animate)
      } else if (!hasCompleted) {
        setHasCompleted(true)
        onComplete?.()
      }
    }

    // Delay before starting
    const delayTimeout = setTimeout(() => {
      frameRef.current = requestAnimationFrame(animate)
    }, delay)

    return () => {
      clearTimeout(delayTimeout)
      if (frameRef.current !== null) {
        cancelAnimationFrame(frameRef.current)
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value, from, duration, delay, easing])

  // Format the display value
  const formattedValue = React.useMemo(() => {
    const roundedValue =
      decimals > 0
        ? displayValue.toFixed(decimals)
        : Math.round(displayValue).toString()

    if (formatted && decimals === 0) {
      return Number(roundedValue).toLocaleString()
    }

    if (formatted && decimals > 0) {
      const [intPart, decPart] = roundedValue.split(".")
      return `${Number(intPart).toLocaleString()}.${decPart}`
    }

    return roundedValue
  }, [displayValue, decimals, formatted])

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

export { NumberCounter }
Number Counter

Dependencies

Files

Installation
