Brickslab.Tools

@brickslab./ui-web

Compteur animé pour KPI et données chiffrées. Anime un nombre de startValue à value avec easing, formatage locale, prefix/suffix et déclenchement au viewport.

KPI basiques

startOnView= pour rejouer en démo

Composants testés

0.0%

Taux de réussite

0 cpts

Bibliothèque

Avec prefix / suffix

€00%

Props

Prop	Type	Défaut	Requis	Description
`value`	`number`	—	✓	Valeur cible à atteindre.
`startValue`	`number`	`0`	—	Valeur de départ.
`direction`	`"up" \| "down"`	`"up"`	—	Sens de défilement.
`duration`	`number`	`1.5`	—	Durée de l'animation en secondes.
`decimalPlaces`	`number`	`0`	—	Nombre de décimales.
`prefix`	`string`	—	—	Préfixe affiché avant la valeur (ex: €, $).
`suffix`	`string`	—	—	Suffixe affiché après la valeur (ex: %, K).
`separator`	`boolean`	`false`	—	Active le séparateur de milliers selon la locale.
`startOnView`	`boolean`	`true`	—	Démarre au scroll dans le viewport.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Affiche la valeur finale directement si réduit.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  value={0}
  startValue={0}
  direction="up"
  duration={1.5}
  decimalPlaces={0}
  prefix="..."
  suffix="..."
  separator={false}
  // +2 autres props disponibles
/>

valuestartValuedirectiondurationdecimalPlacesprefixsuffixseparatorstartOnViewreducedMotion

Utilisation

tsx

import { NumberTicker } from "@brickslab./ui-web";

// KPI simple
<NumberTicker value={1927} separator />

// Avec préfixe/suffixe
<NumberTicker value={98.5} prefix="+" suffix="%" decimalPlaces={1} />

// Défilement vers le bas
<NumberTicker value={0} startValue={100} direction="down" duration={2} />