useCounter

useCounter は、増加、減少、リセットの操作とともに数値カウンターの状態を管理する React フックです。 必要に応じて最小値と最大値を指定し、カウンターの範囲を制限できます。

インターフェース

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>
  );
}