EEA countup
This is a countup react library with the visibility observer already in it Also it has support for Volto addons pipeline, it is basically as an empty addon with tests
Installation
yarn add @eeacms/countup
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 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 CountUp component - children prop |
| onComplete | function | - |
Type: () => void | {shouldRepeat: boolean, delay: number} 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 On value update event handler |
Return values
The hook returns the current count up value and reset method to reset the animation.
import { useCountUp } from 'use-count-up';
const { value, reset } = useCountUp({ isCounting: true });Release
See RELEASE.md.
How to contribute
See DEVELOP.md.
Copyright and license
The Initial Owner of the Original Code is European Environment Agency (EEA). All Rights Reserved.
See LICENSE.md for details.