)}
```
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}.
### More examples
#### Manually start with render prop
```js
{({ countUpRef, start }) => (
)}
```
#### Autostart with render prop
Render start value but start transition on first render:
```js
{({ countUpRef }) => (
);
};
```
## API
### Props
#### `className: string`
CSS class name of the span element.
> Note: This won't be applied when using CountUp with render props.
#### `decimal: string`
Specifies decimal character.
Default: `.`
#### `decimals: number`
Amount of decimals to display.
Default: `0`
#### `delay: number`
Delay in seconds before starting the transition.
Default: `null`
> Note: `delay={0}` will automatically start the count up.
#### `duration: number`
Duration in seconds.
Default: `2`
#### `end: number`
Target value.
#### `prefix: string`
Static text before the transitioning value.
#### `redraw: boolean`
Forces count up transition on every component update.
Default: `false`
#### `preserveValue: boolean`
Save previously ended number to start every new animation from it.
Default: `false`
#### `separator: string`
Specifies character of thousands separator.
#### `start: number`
Initial value.
Default: `0`
#### `plugin: CountUpPlugin`
Define plugin for alternate animations
#### `startOnMount: boolean`
Use for start counter on mount for hook usage.
Default: `true`
#### `suffix: string`
Static text after the transitioning value.
#### `useEasing: boolean`
Enables easing. Set to `false` for a linear transition.
Default: `true`
#### `useGrouping: boolean`
Enables grouping with [separator](#separator-string).
Default: `true`
#### `useIndianSeparators: boolean`
Enables grouping using indian separation, f.e. 1,00,000 vs 100,000
Default: `false`
#### `easingFn: (t: number, b: number, c: number, d: number) => number`
Easing function. Click [here](http://robertpenner.com/easing) for more details.
Default: [`easeInExpo`](https://github.com/inorganik/countUp.js/blob/master/countUp.js#L103-L106)
#### `formattingFn: (value: number) => string`
Function to customize the formatting of the number.
To prevent component from unnecessary updates this function should be memoized with [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback)
#### `enableScrollSpy: boolean`
Enables start animation when target is in view.
#### `scrollSpyDelay: number`
Delay (ms) after target comes into view
#### `scrollSpyOnce: boolean`
Run scroll spy only once
#### `onEnd: ({ pauseResume, reset, start, update }) => void`
Callback function on transition end.
#### `onStart: ({ pauseResume, reset, update }) => void`
Callback function on transition start.
#### `onPauseResume: ({ reset, start, update }) => void`
Callback function on pause or resume.
#### `onReset: ({ pauseResume, start, update }) => void`
Callback function on reset.
#### `onUpdate: ({ pauseResume, reset, start }) => void`
Callback function on update.
### Render props
#### `countUpRef: () => void`
Ref to hook the countUp instance to
#### `pauseResume: () => void`
Pauses or resumes the transition
#### `reset: () => void`
Resets to initial value
#### `start: () => void`
Starts or restarts the transition
#### `update: (newEnd: number?) => void`
Updates transition to the new end value (if given)
## Protips
### Trigger of transition
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.
### Run if in focus
You need to check if your counter in viewport, [react-visibility-sensor](https://github.com/joshwnj/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 ? : null}
)}
);
}
```
> Note: For latest **react-countup** releases there are new options [`enableScrollSpy`](#enablescrollspy-boolean) and [`scrollSpyDelay`](#scrollspydelay-number) 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 (
);
}
```
### Set accessibility properties for occupation period
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 (
<>
);
}
```
### Plugin usage
```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 (