# EEA countup

[![Releases](https://img.shields.io/github/v/release/eea/countup)](https://github.com/eea/countup/releases)

[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fcountup%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/countup/job/master/display/redirect)
[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=countup-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=countup-master)
[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=countup-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=countup-master)
[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=countup-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=countup-master)
[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=countup-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=countup-master)

[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fcountup%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/countup/job/develop/display/redirect)
[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=countup-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=countup-develop)
[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=countup-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=countup-develop)
[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=countup-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=countup-develop)
[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=countup-develop&metric=duplicated_lines_density)](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)