@eeacms/countup
Version:
React component and hook to animate counting up or down to a number
91 lines (62 loc) • 6.76 kB
Markdown
# EEA countup
[](https://github.com/eea/countup/releases)
[](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/countup/job/master/display/redirect)
[](https://sonarqube.eea.europa.eu/dashboard?id=countup-master)
[](https://sonarqube.eea.europa.eu/dashboard?id=countup-master)
[](https://sonarqube.eea.europa.eu/dashboard?id=countup-master)
[](https://sonarqube.eea.europa.eu/dashboard?id=countup-master)
[](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/countup/job/develop/display/redirect)
[](https://sonarqube.eea.europa.eu/dashboard?id=countup-develop)
[](https://sonarqube.eea.europa.eu/dashboard?id=countup-develop)
[](https://sonarqube.eea.europa.eu/dashboard?id=countup-develop)
[](https://sonarqube.eea.europa.eu/dashboard?id=countup-develop)
This is a React countup library with visibility observer support.
The repository keeps lightweight Volto-oriented CI wiring so it can be tested
in the same frontend pipeline as the other EEA packages, but consumers should
use it as a regular dependency rather than as a Volto addon.
## Installation
```
yarn add @eeacms/countup
```
## Development
Local development uses the bundled example app, not a Volto/Plone docker stack.
```bash
make install
make start
```
Go to http://localhost:8888
If port `8888` is busy in your workspace, run `SERVE_PORT=8899 make start`.
To consume `@eeacms/countup` from Volto 17 or Volto 18, add it as a regular
dependency. Do not add it to the Volto `addons` list.
## Props
The component and the hook accept the same props. They are fully interchangeable.
| Prop Name | Type | Default | Description |
| ---------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **isCounting** | boolean | false | Play and pause counting animation |
| **start** | number | 0 | Initial value |
| **end** | number | - | Target value |
| **duration** | number | - | Animation duration in seconds. Defaults to 2 seconds if `end` is set |
| **decimalPlaces** | number | - | Number of decimal places after the decimal separator. |
| **decimalSeparator** | string | - | Decimal separator character |
| **thousandsSeparator** | string | - | Thousands separator character |
| **formatter** | function | - | _Type: (value: number) => number \| string \| node_ <br> A function that formats the output value. It has the highest priority so all other formatting options are ignored |
| **updateInterval** | number | 0 | Update interval in seconds. Determines how often the animated value will change. When set to 0 the value will update on each key frame |
| **children** | function | - | _Type: ({ value: number, reset: () => void }) => number \| string \| node_ <br> CountUp component - children prop |
| **onComplete** | function | - | _Type: () => void \| {shouldRepeat: boolean, delay: number}_ <br> On complete handler. Repeat animation by returning an object with `shouldRepeat` equals `true` and `delay` in seconds. |
| **onUpdate** | function | - | _Type: (currentValue: number \| string \| node) => void_ <br> On value update event handler |
## Return values
The hook returns the current count up value and reset method to reset the animation.
```jsx
import { useCountUp } from 'use-count-up';
const { value, reset } = useCountUp({ isCounting: true });
```
## Release
See [RELEASE.md](https://github.com/eea/countup/blob/master/RELEASE.md).
## How to contribute
See [DEVELOP.md](https://github.com/eea/countup/blob/master/DEVELOP.md).
## Copyright and license
The Initial Owner of the Original Code is European Environment Agency (EEA).
All Rights Reserved.
See [LICENSE.md](https://github.com/eea/countup/blob/master/LICENSE.md) for details.
## Funding
[European Environment Agency (EU)](http://eea.europa.eu)