Skip to main content

​
Overview

Stores a numeric counter value and exposes bounded update handlers. All updates are clamped to the configured min and max values.

​
Import

import { useCounter } from '@kuzenbo/hooks';

​
Signature

function useCounter(
  initialValue?: number,
  options?: UseCounterOptions
): UseCounterReturnValue;

​
Parameters

​
initialValue
number
default:"0"
Initial counter value
​
options
UseCounterOptions
Optional numeric bounds for clamping updates
​
options.min
number
default:"-Infinity"
Minimum allowed value
​
options.max
number
default:"Infinity"
Maximum allowed value

​
Return Value

​
[count, handlers]
UseCounterReturnValue
A tuple containing the current count and handler functions
​
count
number
Current counter value
​
handlers
UseCounterHandlers
Object containing handler functions
​
handlers.increment
() => void
Increments the counter by 1 (clamped to max)
​
handlers.decrement
() => void
Decrements the counter by 1 (clamped to min)
​
handlers.set
(value: number) => void
Sets the counter to a specific value (clamped to min/max)
​
handlers.reset
() => void
Resets the counter to the initial value

​
Usage

​
Basic Counter

import { useCounter } from '@kuzenbo/hooks';

function BasicCounter() {
  const [count, { increment, decrement, reset }] = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

​
Bounded Counter

import { useCounter } from '@kuzenbo/hooks';

function BoundedCounter() {
  const [count, { increment, decrement, set }] = useCounter(5, {
    min: 0,
    max: 10,
  });

  return (
    <div>
      <p>Count: {count} / 10</p>
      <button onClick={increment} disabled={count >= 10}>
        Increment
      </button>
      <button onClick={decrement} disabled={count <= 0}>
        Decrement
      </button>
      <button onClick={() => set(10)}>Set to Max</button>
    </div>
  );
}

​
Quantity Selector

import { useCounter } from '@kuzenbo/hooks';

function QuantitySelector() {
  const [quantity, { increment, decrement, set }] = useCounter(1, {
    min: 1,
    max: 99,
  });

  return (
    <div>
      <button onClick={decrement}>-</button>
      <input
        type="number"
        value={quantity}
        onChange={(e) => set(parseInt(e.target.value) || 1)}
        min={1}
        max={99}
      />
      <button onClick={increment}>+</button>
    </div>
  );
}

​
Progress Tracker

import { useCounter } from '@kuzenbo/hooks';

function ProgressTracker() {
  const [progress, { increment, reset }] = useCounter(0, {
    min: 0,
    max: 100,
  });

  return (
    <div>
      <div className="progress-bar">
        <div style={{ width: `${progress}%` }} />
      </div>
      <p>{progress}% Complete</p>
      <button onClick={() => increment()}>+10%</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

​
Type Definitions

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

export interface UseCounterHandlers {
  increment: () => void;
  decrement: () => void;
  set: (value: number) => void;
  reset: () => void;
}

export type UseCounterReturnValue = [number, UseCounterHandlers];

Build docs developers (and LLMs) love

Get started for freeTalk to us