~ 5 минут
Использование Countup.js для анимирования числовых значений в React
245
2/3/2022
React Countup - это легковесная библиотека основанная на 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> ) }
Взгляните на наш стартап:
Выбирай экскурсии и активности по всему миру
Уже зарегистрировано 0 стран, 0 направлений, 0 экскурсий
Есть интересная идея?
И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию