useCounter.md

useCounter

React state hook that tracks a numeric value.

useNumber is an alias for useCounter.

Usage

import {useCounter, useNumber} from 'react-use';

const Demo = () => {
  const [min, { inc: incMin, dec: decMin }] = useCounter(1);
  const [max, { inc: incMax, dec: decMax }] = useCounter(10);
  const [value, { inc, dec, set, reset }] = useCounter(5, max, min);

  return (
    <div>
      <div>
        current: { value } [min: { min }; max: { max }]
      </div>

      <br />
      Current value: <button onClick={ () => inc() }>Increment</button>
      <button onClick={ () => dec() }>Decrement</button>
      <button onClick={ () => inc(5) }>Increment (+5)</button>
      <button onClick={ () => dec(5) }>Decrement (-5)</button>
      <button onClick={ () => set(100) }>Set 100</button>
      <button onClick={ () => reset() }>Reset</button>
      <button onClick={ () => reset(25) }>Reset (25)</button>

      <br />
      <br />
      Min value:
      <button onClick={ () => incMin() }>Increment</button>
      <button onClick={ () => decMin() }>Decrement</button>

      <br />
      <br />
      Max value:
      <button onClick={ () => incMax() }>Increment</button>
      <button onClick={ () => decMax() }>Decrement</button>
    </div>
  );
};

Reference

const [ current, { inc, dec, get, set, reset } ] = useCounter(initial: number, max: number | null = null, min: number | null = null);

• current - current counter value;
• get(): number - getter of current counter value;
• inc(delta: number): void - increment current value;
• dec(delta: number): void - decrement current value;
• set(value: number): void - set arbitrary value;
• reset(value: number): void - as the set, but also will assign value by reference to the initial parameter;