Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA number with increment, decrement, set and reset, optional min, max and step, always clamped into range.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for quantity pickers, steppers and any bounded number you change by a step.
Do not use it for a value typed freely into an input; keep that as a string and parse it on blur.
import { useCounter } from "@/hooks/use-counter"const [qty, { increment, decrement, set, reset }] = useCounter(1, {
min: 1,
max: 10,
})useCounter(initial = 0, options?): [number, { increment, decrement, set, reset }]
| Option | Type | Default | Description |
|---|---|---|---|
min | number | -Infinity | Lowest allowed value. |
max | number | Infinity | Highest allowed value. |
step | number | 1 | Amount increment and decrement change by. |
increment(by?) and decrement(by?) accept an amount that replaces step. Every result is clamped into [min, max], including initial and set. NaN is ignored.
A hook has no markup. For a quantity control, give the buttons names ("Decrease quantity"), disable them at the limits and expose the value with role="spinbutton" with aria-valuemin, aria-valuemax and aria-valuenow, or use a native number input.
The hook ships with renderHook tests (use-counter.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.