CountUp: Tạo hiệu ứng đếm số động trong React

Chào các bạn, hôm nay mình sẽ giới thiệu một component React nhỏ nhưng cực kỳ hữu ích, tạm đặt là CountUp. Component này cho phép chúng ta tạo hiệu ứng đếm số tăng dần một cách mượt mà, thường được sử dụng để hiển thị số liệu thống kê, số lượng người dùng, hoặc bất kỳ giá trị số nào cần được hiển thị một cách sinh động.

Hiệu ứng đếm số không chỉ giúp giao diện trở nên hấp dẫn hơn mà còn thu hút sự chú ý của người dùng vào những con số quan trọng. Với CountUp, việc tích hợp hiệu ứng này vào ứng dụng React trở nên vô cùng đơn giản.


import { animate } from 'framer-motion'

import { useEffect, useRef } from 'react'



interface CountUpProps {

  from: number

  to: number

}



function CountUp({ from, to }: CountUpProps) {

  const nodeRef = useRef(null)



  useEffect(() => {

    const node = nodeRef.current



    const controls = animate(from, to, {

      duration: 2.4,

      ease: 'easeOut',

      onUpdate(value) {

        node.textContent = value.toFixed(0)

      },

    })



    return () => controls.stop()

  }, [from, to])



  return <span ref={nodeRef}>{to}</span>

}



export default CountUp

Giải thích code

Component sử dụng thư viện framer-motion để tạo hiệu ứng animation. Đây là một thư viện rất mạnh mẽ và phổ biến trong cộng đồng React.
useRef được sử dụng để lấy tham chiếu đến DOM element mà chúng ta muốn hiển thị số đếm.
useEffect hook được sử dụng để khởi tạo animation khi component được mount.
Hàm animate của framer-motion nhận vào giá trị bắt đầu (from), giá trị kết thúc (to), và một object cấu hình.
Trong object cấu hình, chúng ta thiết lập duration (thời gian animation) và ease (kiểu hiệu ứng).
Hàm onUpdate được gọi trong mỗi frame của animation, và chúng ta cập nhật textContent của DOM element với giá trị hiện tại.
Hàm cleanup trong useEffect được sử dụng để dừng animation khi component unmount, tránh memory leak.

Cách sử dụng

Bạn chỉ cần import nó và truyền vào hai props from và to:


<CountUp from={0} to={100} />

Ví dụ trên sẽ tạo hiệu ứng đếm từ 0 đến 100. Bạn có thể tùy chỉnh giá trị from và to để phù hợp với nhu cầu của mình.

Kết luận

Đây là một giải pháp đơn giản và hiệu quả để thêm hiệu ứng đếm số vào ứng dụng React. Với sự hỗ trợ của framer-motion, hiệu ứng được tạo ra rất mượt mà và chuyên nghiệp. Hy vọng bài viết này sẽ hữu ích cho các bạn. Hãy thử áp dụng nó vào dự án của mình và chia sẻ kết quả nhé!