Использование 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> ) }