Wirestrap is still in active development
This project is pre-1.0 and may introduce breaking changes at any time without prior notice.
Counter
Animated numeric display that transitions smoothly from its current value to a new
target using requestAnimationFrame. Pass a numeric value and the counter
re-animates on every Livewire morph that changes it. Pass a JS expression
(e.g. count="$wire.total") to bind directly to a Livewire
property in Alpine context.
Basic usage
Pass a value with :count. The counter animates from zero to the
target on mount, and from its current value to the new one on each DOM update.
<x-wirestrap::counter :count="142300" />
<x-wirestrap::counter :count="142300" :duration="2000" />Decimals
Set :decimals to keep decimal places visible throughout the animation.
Without it, values are rounded to the nearest integer.
<x-wirestrap::counter :count="4.87" :decimals="2" />Reactive
Pass a JS expression: the component detects it's not a numeric
literal and evaluates it in Alpine context via x-effect. The counter
re-animates each time the expression's value changes. Each animation always runs
for the full configured duration.
<x-wirestrap::counter count="$wire.total" />Props
Global configuration
Most prop defaults can be overridden globally via config/wirestrap.php.
x-wirestrap::counter
| Prop | Type | Default | Description |
|---|---|---|---|
count |
int|float|string |
0 |
Target value. Use :count with a PHP value for a static counter, or omit the colon and pass a JS expression (e.g. $wire.total) for reactive mode. |
decimals |
int |
config |
Number of decimal places displayed during and after animation. |
duration |
int |
config |
Animation duration in ms. |
|
No results found
|
|||