Использование Countup.js для анимирования числовых значений в React

React Countup - это легковесная библиотека основанная CountUp.js. Используется для быстрого создания анимации, отображающей числовые данные более интересным способом.

Вадим Пашаев

Вадим Пашаев

2/3/2022

Использование Countup.js для анимирования числовых значений в React

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

Для справки

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

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

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

yarn add react-countup

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

<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>
  )
}

Подписаться на рассылку

Получите лучший маркетинговый контент недели

Подписаться на рассылку

Получите лучший маркетинговый контент недели

Оценка проекта

Хотите быструю оценку Вашего проекта?

Заполните эту форму для получения бесплатной оценки вашей идеи или задачи.

Есть интересная идея?

И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию