~ 4 мин
React Countup - это легковесная библиотека основанная CountUp.js. Используется для быстрого создания анимации, отображающей числовые данные более интересным способом.
Вадим Пашаев
2/3/2022
Иногда для того, чтобы разнообразить интерфейс веб-приложения или сайта, хочется анимировать числовые значения, но при этом не хочется подключать какие-то сложные библиотеки анимаций типа Frame Motion, React Spring, React Animations, React Transition Group или React Move
Для справки
Познакомьтесь с небольшой библиотекой React CountUp, которая основана на js-библиотеке CountUp.js. С помощью нее можно строить интересные живые числовые анимированные блоки.
Установить библиотеку достаточно просто. Для этого нужно в любом терминале в папке проекта выполнить команду. Подойдет даже, если вы используете 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> ) }
Оценка проекта
Хотите быструю оценку Вашего проекта?
Есть интересная идея?
И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию