useCounter.md

useCounter

Vue state hook that tracks a numeric value.

useNumber is an alias for useCounter.

Usage

import {useCounter, useNumber} from 'vue-next-use';

const Demo = {
  setup() {
      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;