useCounter#

A numeric counter signal paired with clamped mutators — inc, dec, set, and reset all respect the optional min/max bounds and return the new value. Cross-platform — import from @sigx/use.

TSX 
import { component, render } from 'sigx';
import { useCounter } from '@sigx/use';

const Stepper = component(() => {
    const { count, inc, dec, reset } = useCounter(0, { min: 0, max: 10 });

    return () => (
        <div class="flex items-center gap-3">
            <button class="btn" onClick={() => dec()}>−</button>
            <span class="font-mono text-lg w-8 text-center">{count}</span>
            <button class="btn" onClick={() => inc()}>+</button>
            <button class="btn btn-ghost" onClick={() => reset()}>reset</button>
        </div>
    );
});

render(<Stepper />, "#app");

Usage#

TypeScript 
import { useCounter } from '@sigx/use';

const { count, inc, dec, set, reset } = useCounter(0, { min: 0, max: 10 });
inc();    // 1
inc(4);   // 5
dec(5);   // clamped to 0
set(20);  // clamped to 10
reset();  // back to the initial value (0)

Writing count.value directly is allowed but bypasses clamping — the mutators are the clamped path. Reach for set() when you want the bound enforced.

Signature#

TypeScript 
function useCounter(initial?: number, options?: UseCounterOptions): UseCounterReturn;

interface UseCounterOptions {
    min?: number;
    max?: number;
}

Options#

OptionTypeDefaultDescription
minnumber-InfinityLower clamp bound applied by every mutator.
maxnumberInfinityUpper clamp bound applied by every mutator.

Returns#

useCounter returns a UseCounterReturn object:

FieldTypeDescription
countPrimitiveSignal<number>The counter signal. Read .value (or bare in JSX).
inc(delta?: number) => numberIncrement by delta (default 1), clamped. Returns the new value.
dec(delta?: number) => numberDecrement by delta (default 1), clamped. Returns the new value.
set(value: number) => numberSet to value, clamped. Returns the new value.
reset(value?: number) => numberReset to value (default: the initial value), clamped. Returns the new value.

Platform: everywhere. No cleanup needed.

See also#