Count

The Count component in REAVIZ allows you to animate counting from one number to another. This feature can be used to display numerical data dynamically, adding a visual flair to your data presentations.

Where to use:

Display Dynamic Numbers: Ideal for displaying changing numerical values.
Highlight Key Metrics: Useful for highlighting key metrics and statistics in a visually engaging way.
Animate Data: Great for adding animation and interactivity to your data displays.

Quick Start

To use the Count component, use import the Count and give it a number to. Optionally you can give the from number to start from.

import { Count } from 'reaviz';


export default function App() {
return (
  <Count
    from={0}
    to={50}
  />
);
}

import { Count } from 'reaviz';

export default function App() {
return (
  <Count
    from={0}
    to={50}
  />
);
}

Examples

API

Count

Name	Type	Default
`className`	`string` CSS class to apply to the counter element.
`to`	`number` Number to animate to
`from`	`number` Number to animate from. Defaults 0.
`duration`	`number` Duration of the animation in seconds. Defaults 1.
`delay`	`number` Delay of the animation. Defaults 0.
`format`	`boolean` Localize the number. Defaults true.
`decimalPlaces`	`number` Number of decimal places. Defaults 0.
`prefix`	`string \| number` Prefix the number with a string or number.
`suffix`	`string \| number` Suffix the number with a string or number.