@eeacms/countup

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.

Funding

European Environment Agency (EU)