Count Up

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface CountUpProps extends Omit<
8  React.ComponentProps<"span">,
9  "children"
10> {
11  /** The number to land on. */
12  value: number
13  /** The number to start from. */
14  from?: number
15  /** Milliseconds for the whole count. */
16  duration?: number
17  /** Decimal places to hold throughout the count. */
18  decimals?: number
19  /** Locale passed to Intl.NumberFormat, so grouping matches the reader. */
20  locale?: string
21  /** Rendered before the number, inside the same element. */
22  prefix?: string
23  /** Rendered after the number. */
24  suffix?: string
25  /** Hold until the number scrolls into view instead of counting on mount. */
26  startOnView?: boolean
27  /** Render the final value with no count. */
28  disabled?: boolean
29}
30 
31/** --ease-out-quart, expressed as a function so JS and CSS agree. */
32function easeOutQuart(t: number) {
33  return 1 - Math.pow(1 - t, 4)
34}
35 
36export function CountUp({
37  value,
38  from = 0,
39  duration = 1400,
40  decimals = 0,
41  locale,
42  prefix,
43  suffix,
44  startOnView = true,
45  disabled = false,
46  className,
47  ...props
48}: CountUpProps) {
49  const ref = React.useRef<HTMLSpanElement>(null)
50  const [active, setActive] = React.useState(!startOnView)
51 
52  const format = React.useMemo(
53    () =>
54      new Intl.NumberFormat(locale, {
55        minimumFractionDigits: decimals,
56        maximumFractionDigits: decimals,
57      }),
58    [locale, decimals]
59  )
60 
61  React.useEffect(() => {
62    if (!startOnView || disabled) {
63      return
64    }
65 
66    const node = ref.current
67    if (!node || typeof IntersectionObserver === "undefined") {
68      setActive(true)
69      return
70    }
71 
72    const observer = new IntersectionObserver(
73      ([entry]) => {
74        if (entry.isIntersecting) {
75          setActive(true)
76          observer.disconnect()
77        }
78      },
79      { threshold: 0.4 }
80    )
81 
82    observer.observe(node)
83    return () => observer.disconnect()
84  }, [startOnView, disabled])
85 
86  React.useEffect(() => {
87    const node = ref.current
88    if (!node) {
89      return
90    }
91 
92    const reduced =
93      typeof window !== "undefined" &&
94      window.matchMedia("(prefers-reduced-motion: reduce)").matches
95 
96    if (disabled || !active || reduced || duration <= 0) {
97      node.textContent = format.format(value)
98      return
99    }
100 
101    let frame = 0
102    let start: number | null = null
103 
104    // The value is written straight to the DOM rather than through state, so a
105// … truncated