A React component wrapper around CountUp.js
npm install react-countup
A configurable React component wrapper around CountUp.js.
Click here to view on CodeSandbox.
- Installation
- Usage
- Simple example
- Render prop example
- More examples
- Manually start with render prop
- Autostart with render prop
- Delay start
- Hook
- 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
- countUpRef: () => void
- pauseResume: () => void
- reset: () => void
- start: () => void
- update: (newEnd: number?) => void
- Protips
- Trigger of transition
- Run if in focus
- Set accessibility properties for occupation period
- License
``bash`
yarn add react-countup
`js`
import CountUp from 'react-countup';
`js`
This will start a count up transition from 0 to 100 on render.
`js`
end={160527.012}
duration={2.75}
separator=" "
decimals={4}
decimal=","
prefix="EUR "
suffix=" left"
onEnd={() => console.log('Ended! 👏')}
onStart={() => console.log('Started! 💨')}
>
{({ countUpRef, start }) => (
)}
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}.
#### Manually start with render prop
`js`
{({ countUpRef, start }) => (
)}
#### Autostart with render prop
Render start value but start transition on first render:
`js`
{({ countUpRef }) => (
)}
Note that delay={0} will automatically start the count up.
#### Delay start
`js`
#### Simple example
`js
import { useCountUp } from 'react-countup';
const SimpleHook = () => {
useCountUp({ ref: 'counter', end: 1234567 });
return ;
};
`
#### Complete example
`js
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 (
API
$3
####
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:
####
Delay in seconds before starting the transition.
Default:
> Note:
will automatically start the count up.####
duration: numberDuration in seconds.
Default:
####
Target value.
####
Static text before the transitioning value.
####
Forces count up transition on every component update.
Default:
####
Save previously ended number to start every new animation from it.
Default:
####
Specifies character of thousands separator.
####
Initial value.
Default:
####
Define plugin for alternate animations
####
Use for start counter on mount for hook usage.
Default:
####
Static text after the transitioning value.
####
Enables easing. Set to
for a linear transition.Default:
true####
Enables grouping with separator.
Default:
####
Enables grouping using indian separation, f.e. 1,00,000 vs 100,000
Default:
####
Easing function. Click here for more details.
####
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.
$3
####
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)
Protips
$3
By default, the animation is triggered if any of the following props has changed:
-
-
- If
is set to true your component will start the transition on every component update.$3
You need to check if your counter in viewport, react-visibility-sensor can be used for this purpose.
`js
import React from 'react';
import CountUp from 'react-countup';
import VisibilitySensor from 'react-visibility-sensor';
import './styles.css';export default function App() {
return (
{({ isVisible }) => (
{isVisible ?
)}
);
}
`> Note: For latest react-countup releases there are new options
and scrollSpyDelay which enable scroll spy, so that as user scrolls to the target element, it begins counting animation automatically once it has scrolled into view.`js
import './styles.css';
import CountUp, { useCountUp } from 'react-countup';export default function App() {
useCountUp({
ref: 'counter',
end: 1234567,
enableScrollSpy: true,
scrollSpyDelay: 1000,
});
return (
);
}
`$3
You can use callback properties to control accessibility:
js
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 (
<>
duration="3"
onStart={onStart}
onEnd={onEnd}
containerProps={containerProps}
/>
);
}
`$3
js
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 (
);
}
``MIT