useCounter

useCounter 是一个管理数值计数器状态、并提供递增、递减和重置能力的 React Hook。你可以选择提供最小值和最大值来约束计数器的范围。

接口

function useCounter(
  initialValue: number = 0,
  options?: UseCounterOptions
): UseCounterReturn;

参数

• initialValuenumber
  

  计数器的初始值。默认为 0。

• optionsUseCounterOptions
  

  计数器的选项。

  • options.minnumber
    

    计数器可以达到的最小值。如果未提供，则没有下限。

  • options.maxnumber
    

    计数器可以达到的最大值。如果未提供，则没有上限。

  • options.stepnumber · 1
    

    递增或递减的值。默认为 1。

返回值

• UseCounterReturn
  

  包含计数值和控制函数的对象。

  • countnumber
    

    当前的计数值。

  • increment() => void
    

    递增计数的函数。

  • decrement() => void
    

    递减计数的函数。

  • reset() => void
    

    将计数重置为初始值的函数。

  • setCount(value: number | ((prev: number) => number)) => void
    

    将计数设置为特定值，或设置为返回新值的函数的函数。

示例

import { useCounter } from 'react-simplikit';

function ShoppingCart() {
  const { count, increment, decrement, reset } = useCounter(1, {
    min: 1,
    max: 10,
  });

  return (
    <div>
      <span>Quantity: {count}</span>
      <button type="button" onClick={decrement}>
        -
      </button>
      <button type="button" onClick={increment}>
        +
      </button>
      <button type="button" onClick={reset}>
        Reset
      </button>
    </div>
  );
}