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 (opens in a new tab)

Prop	Description	Default
`className`	`string`
`to` *	Number to animate to `number`
`from`	Number to animate from. Defaults 0. `number`	`0`
`duration`	Duration of the animation in seconds. Defaults 1. `number`	`1`
`delay`	Delay of the animation. Defaults 0. `number`	`0`
`format`	Localize the number. Defaults true. `boolean`
`decimalPlaces`	Number of decimal places. Defaults 0. `number`	`0`
`prefix`	Prefix the number with a string or number. `string \| number`
`suffix`	Suffix the number with a string or number. `string \| number`

Brush Glow