CountUp.js в React: как сделать анимацию чисел

Иногда для того, чтобы разнообразить интерфейс веб-приложения или сайта, хочется анимировать числовые значения, но при этом не хочется подключать какие-то сложные библиотеки анимаций типа Framer Motion, React Spring, React Animations, React Transition Group или React Move

Сейчас мы познакомим вас с небольшой библиотекой React CountUp, которая основана на js-библиотеке CountUp.js. С помощью нее можно строить интересные живые числовые анимированные блоки.

Установка библиотеки React Countup в Next.js

Установить библиотеку достаточно просто. Для этого нужно в любом терминале в папке проекта выполнить команду. Подойдет даже, если вы используете Next.js.

yarn add react-countup

Второй шаг - это добавление компонента в разметку jsx. Например, если вы используете MUI5.

<Card elevation={5} sx={{ borderRadius: '40px', padding: '30px' }}>
  <Typography sx={{ fontSize: '40px' }}>
    <CountUp end={100} />
  </Typography>
  <Typography>Контакты</Typography>
</Card>

Этот компонент запустит анимацию чисел от 0 до 100 после первоначального рендеринга.

Почитать как собрать приложение на Next.js + MUI5 + Typescript или скачать готовый шаблон можно тут.

Компонент имеет множество параметров и позволяет настраивать задержку для старта анимации, длительность самой анимации, начальные и конечные значения, разделители, ease-функции.

Ниже более сложный пример:

<CountUp
  start={-875.039}
  end={160527.012}
  duration={2.75}
  separator=" "
  decimals={4}
  decimal=","
  prefix="EUR "
  suffix=" left"
  onEnd={() => console.log('Ended! 👏')}
  onStart={() => console.log('Started! 💨')}
>
  {({ countUpRef, start }) => (
    <div>
      <span ref={countUpRef} />
      <button onClick={start}>Start</button>
    </div>
  )}
</CountUp>

Хуки

Если по каким то причинам вы не хотите использовать компонент CountUp, есть соответствующие хуки, которые могут добавить функциональности вашему компоненту.

import { useCountUp } from 'react-countup'

const SimpleHook = () => {
  useCountUp({ ref: 'counter', end: 1234567 })
  return <span id="counter" />
}

Более сложный пример с хуками

import { useCountUp } from 'react-countup'

const CompleteHook = () => {
  const countUpRef = React.useRef(null)
  const { start, pauseResume, reset, update } = useCountUp({
    ref: countUpRef,
    start: 0,
    end: 1234567,
    delay: 1000,
    duration: 5,
    onReset: () => console.log('Resetted!'),
    onUpdate: () => console.log('Updated!'),
    onPauseResume: () => console.log('Paused or resumed!'),
    onStart: ({ pauseResume }) => console.log(pauseResume),
    onEnd: ({ pauseResume }) => console.log(pauseResume)
  })
  return (
    <div>
      <div ref={countUpRef} />
      <button onClick={start}>Start</button>
      <button onClick={reset}>Reset</button>
      <button onClick={pauseResume}>Pause/Resume</button>
      <button onClick={() => update(2000)}>Update to 2000</button>
    </div>
  )
}

Задержка старта отсчета в React-Countup

<CountUp delay={2} end={100} />

delay - это задержка в секундах до того, как начнется отсчет счетчика

delay={0} автоматически запустит обратный отсчет

Запуск React-Countup только в активной области браузера

Если вам нужно, чтобы счетчик анимировался только в окне просмотра, то используйте react-visibility-sensor для этой цели.

VisibilitySensor - это React-компонент, который отправляет уведомления, когда он начинает проходить через область просмотра браузера. Как только он находится в области просмотра, он начинает посылать проп isVisible={true}

import React from 'react'
import CountUp from 'react-countup'
import VisibilitySensor from 'react-visibility-sensor'
import './styles.css'

export default function App() {
  return (
    <div className="App">
      <div className="content" />
      <VisibilitySensor partialVisibility offset={{ bottom: 200 }}>
        {({ isVisible }) => (
          <div style={{ height: 100 }}>
            {isVisible ? <CountUp end={1000} /> : null}
          </div>
        )}
      </VisibilitySensor>
    </div>
  )
}