Skip to main content

​
Usage

import { useCounter } from '@kivora/react';

function Demo() {
  const { count, increment, decrement, reset } = useCounter({
    initialValue: 0,
    min: 0,
    max: 10
  });

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

​
Parameters

​
options
UseCounterOptions
Configuration object for the counter

​
Return Value

​
count
number
Current counter value
​
increment
(step?: number) => void
Increment the counter by step (default: 1). Value is clamped to max if set.
​
decrement
(step?: number) => void
Decrement the counter by step (default: 1). Value is clamped to min if set.
​
set
(value: number) => void
Set the counter to a specific value. Value is clamped to min/max if set.
​
reset
() => void
Reset the counter to initialValue

​
Examples

​
Basic Counter

const { count, increment, decrement } = useCounter();

return (
  <div>
    <button onClick={() => decrement()}>-</button>
    <span>{count}</span>
    <button onClick={() => increment()}>+</button>
  </div>
);

​
With Min/Max Limits

const { count, increment, decrement } = useCounter({
  initialValue: 50,
  min: 0,
  max: 100
});

// count will never go below 0 or above 100

​
Custom Step Size

const { count, increment, decrement } = useCounter({ initialValue: 0 });

return (
  <div>
    <button onClick={() => decrement(10)}>-10</button>
    <button onClick={() => increment(10)}>+10</button>
  </div>
);

Build docs developers (and LLMs) love

Get started for freeTalk to us