React CountUp
A configurable React component wrapper around CountUp.js.
Click here to view on CodeSandbox.
- Installation
- Usage
- API
- Props
className: string
decimal: string
decimals: number
delay: ?number
duration: number
end: number
prefix: string
redraw: boolean
preserveValue: boolean
separator: string
start: number
plugin: CountUpPlugin
startOnMount: boolean
suffix: string
useEasing: boolean
useGrouping: boolean
useIndianSeparators: boolean
easingFn: (t: number, b: number, c: number, d: number) => number
formattingFn: (value: number) => string
enableScrollSpy: boolean
scrollSpyDelay: number
scrollSpyOnce: boolean
onEnd: ({ pauseResume, reset, start, update }) => void
onStart: ({ pauseResume, reset, update }) => void
onPauseResume: ({ reset, start, update }) => void
onReset: ({ pauseResume, start, update }) => void
onUpdate: ({ pauseResume, reset, start }) => void
- Render props
- Props
- Protips
- License
yarn add react-countup
import CountUp from 'react-countup';
<CountUp end={100} />
This will start a count up transition from 0
to 100
on render.
<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>
The transition won't start on initial render as it needs to be triggered manually here.
Tip: If you need to start the render prop component immediately, you can set delay={0}.
<CountUp start={0} end={100}>
{({ countUpRef, start }) => (
<div>
<span ref={countUpRef} />
<button onClick={start}>Start</button>
</div>
)}
</CountUp>
Render start value but start transition on first render:
<CountUp start={0} end={100} delay={0}>
{({ countUpRef }) => (
<div>
<span ref={countUpRef} />
</div>
)}
</CountUp>
Note that delay={0}
will automatically start the count up.
<CountUp delay={2} end={100} />
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>
);
};
CSS class name of the span element.
Note: This won't be applied when using CountUp with render props.
Specifies decimal character.
Default: .
Amount of decimals to display.
Default: 0
Delay in seconds before starting the transition.
Default: null
Note:
delay={0}
will automatically start the count up.
Duration in seconds.
Default: 2
Target value.
Static text before the transitioning value.
Forces count up transition on every component update.
Default: false
Save previously ended number to start every new animation from it.
Default: false
Specifies character of thousands separator.
Initial value.
Default: 0
Define plugin for alternate animations
Use for start counter on mount for hook usage.
Default: true
Static text after the transitioning value.
Enables easing. Set to false
for a linear transition.
Default: true
Enables grouping with separator.
Default: true
Enables grouping using indian separation, f.e. 1,00,000 vs 100,000
Default: false
Easing function. Click here for more details.
Default: easeInExpo
Function to customize the formatting of the number.
To prevent component from unnecessary updates this function should be memoized with useCallback
Enables start animation when target is in view.
Delay (ms) after target comes into view
Run scroll spy only once
Callback function on transition end.
Callback function on transition start.
Callback function on pause or resume.
Callback function on reset.
Callback function on update.
Ref to hook the countUp instance to
Pauses or resumes the transition
Resets to initial value
Starts or restarts the transition
Updates transition to the new end value (if given)
By default, the animation is triggered if any of the following props has changed:
duration
end
start
If redraw
is set to true
your component will start the transition on every component update.
You need to check if your counter in viewport, react-visibility-sensor can be used for this purpose.
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>
);
}
Note: For latest react-countup releases there are new options
enableScrollSpy
andscrollSpyDelay
which enable scroll spy, so that as user scrolls to the target element, it begins counting animation automatically once it has scrolled into view.
import './styles.css';
import CountUp, { useCountUp } from 'react-countup';
export default function App() {
useCountUp({
ref: 'counter',
end: 1234567,
enableScrollSpy: true,
scrollSpyDelay: 1000,
});
return (
<div className="App">
<div className="content" />
<CountUp end={100} enableScrollSpy />
<br />
<span id="counter" />
</div>
);
}
You can use callback properties to control accessibility:
import React from 'react';
import CountUp, { useCountUp } from 'react-countup';
export default function App() {
useCountUp({ ref: 'counter', end: 10, duration: 2 });
const [loading, setLoading] = React.useState(false);
const onStart = () => {
setLoading(true);
};
const onEnd = () => {
setLoading(false);
};
const containerProps = {
'aria-busy': loading,
};
return (
<>
<CountUp
end={123457}
duration="3"
onStart={onStart}
onEnd={onEnd}
containerProps={containerProps}
/>
<div id="counter" aria-busy={loading} />
</>
);
}
import { CountUp } from 'countup.js';
import { Odometer } from 'odometer_countup';
export default function App() {
useCountUp({
ref: 'counter',
end: 1234567,
enableScrollSpy: true,
scrollSpyDelay: 1000,
plugin: Odometer,
});
return (
<div className="App">
<span id="counter" />
</div>
);
}
MIT
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
2020-12-29 js将手机号中间四位变成*号
2020-12-29 取出字符串中的所有数字
2020-12-29 js中字节B转化成KB,MB,GB
2020-12-29 数组去重的几种方法
2020-12-29 最全的常用正则表达式大全——包括校验数字、字符、一些特殊的需求等等
2020-12-29 jQuery滚动条回到顶部或指定位置