Skip to main content
Custom React hook that animates counting from 0 to a target number with smooth easing animation.

​
Import

import useCountUp from "../hooks/useCountUp"

​
Signature

function useCountUp(to: number, duration?: number): number

​
Parameters

​
to
number
required
The target number to count up to.
​
duration
number
default:3000
Animation duration in milliseconds. Defaults to 3000ms (3 seconds).

​
Returns

​
count
number
The current animated count value.

​
Usage

const Statistics = () => {
  const bookmarkCount = useCountUp(127, 2000)
  const tagCount = useCountUp(45, 2000)

  return (
    <div>
      <div>
        <h3>{bookmarkCount}</h3>
        <p>Bookmarks saved</p>
      </div>
      <div>
        <h3>{tagCount}</h3>
        <p>Tags created</p>
      </div>
    </div>
  )
}

​
Implementation Details

  • Easing Function: Uses cubic easing (1 - (1 - t)³) for smooth animation
  • Performance: Utilizes requestAnimationFrame for optimal performance
  • Precision: Floors the animated value and ensures exact target at completion
  • Cleanup: Properly cancels animation frame on component unmount

​
Examples

​
Basic Counter

const Counter = () => {
  const count = useCountUp(100)
  
  return <h1>{count}</h1>
}

​
Fast Animation

const QuickCounter = () => {
  const count = useCountUp(50, 1000) // 1 second animation
  
  return <span>{count} items</span>
}

​
Slow Animation

const SlowCounter = () => {
  const count = useCountUp(999, 5000) // 5 second animation
  
  return <div className="stat">{count}</div>
}

​
Common Use Cases

  • Animating statistics on page load
  • Dashboard metric displays
  • Achievement counters
  • Progress indicators
  • Loading state animations
The hook starts counting from 0 whenever the component mounts. If you need to restart the animation, remount the component or use a key prop.

Build docs developers (and LLMs) love

Get started for freeTalk to us