useCounter

useCounterは、数値を増加または減少させるためのカスタムフックです。

Count: 10

const { value, increment, decrement, reset } = useCounter({
  defaultValue: 10,
})

return (
  <VStack>
    <Text>Count: {value}</Text>
    <ButtonGroup.Root>
      <ButtonGroup.Item
        colorScheme="success"
        variant="subtle"
        onClick={() => increment()}
      >
        + 1
      </ButtonGroup.Item>
      <ButtonGroup.Item
        colorScheme="danger"
        variant="subtle"
        onClick={() => decrement()}
      >
        - 1
      </ButtonGroup.Item>
      <ButtonGroup.Item onClick={reset}>Reset</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

import { useCounter } from "@yamada-ui/react"

import { useCounter } from "@/components/ui"

import { useCounter } from "@workspaces/ui"

const { value, valueAsNumber, update, increment, decrement, reset, cast, out } =
  useCounter()

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueに文字列または数値を設定します。

Count: 10

const { value, increment, decrement, reset } = useCounter({
  defaultValue: 10,
})

return (
  <VStack>
    <Text>Count: {value}</Text>
    <ButtonGroup.Root>
      <ButtonGroup.Item
        colorScheme="success"
        variant="subtle"
        onClick={() => increment()}
      >
        + 1
      </ButtonGroup.Item>
      <ButtonGroup.Item
        colorScheme="danger"
        variant="subtle"
        onClick={() => decrement()}
      >
        - 1
      </ButtonGroup.Item>
      <ButtonGroup.Item onClick={reset}>Reset</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

最小・最大値を設定する

最小値と最大値を設定する場合は、minまたはmaxに数値を設定します。

Count: 5

const { value, increment, decrement, min, max, reset } = useCounter({
  defaultValue: 5,
  min: 0,
  max: 10,
})

return (
  <VStack>
    <Text>Count: {value}</Text>
    <ButtonGroup.Root>
      <ButtonGroup.Item
        colorScheme="success"
        variant="subtle"
        onClick={() => increment()}
        disabled={max}
      >
        + 1
      </ButtonGroup.Item>
      <ButtonGroup.Item
        colorScheme="danger"
        variant="subtle"
        onClick={() => decrement()}
        disabled={min}
      >
        - 1
      </ButtonGroup.Item>
      <ButtonGroup.Item onClick={reset}>Reset</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

ステップ値を設定する

ステップ値を設定する場合は、stepに数値を設定します。

Count: 0

const { value, increment, decrement, reset } = useCounter({
  defaultValue: 0,
  step: 5,
})

return (
  <VStack>
    <Text>Count: {value}</Text>
    <ButtonGroup.Root>
      <ButtonGroup.Item
        colorScheme="success"
        variant="subtle"
        onClick={() => increment()}
      >
        + 5
      </ButtonGroup.Item>
      <ButtonGroup.Item
        colorScheme="danger"
        variant="subtle"
        onClick={() => decrement()}
      >
        - 5
      </ButtonGroup.Item>
      <ButtonGroup.Item onClick={reset}>Reset</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Count: 0

const { value, increment, decrement } = useCounter({
  defaultValue: 0,
})

return (
  <VStack>
    <Text>Count: {value}</Text>
    <ButtonGroup.Root colorScheme="success" variant="subtle">
      <For each={[1, 5, 10]}>
        {(step) => (
          <ButtonGroup.Item onClick={() => increment(step)}>
            + {step}
          </ButtonGroup.Item>
        )}
      </For>
    </ButtonGroup.Root>
    <ButtonGroup.Root colorScheme="danger" variant="subtle">
      <For each={[1, 5, 10]}>
        {(step) => (
          <ButtonGroup.Item onClick={() => decrement(step)}>
            - {step}
          </ButtonGroup.Item>
        )}
      </For>
    </ButtonGroup.Root>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

小数点を設定する

小数点を設定する場合は、precisionに数値を設定します。

Count: 5.12

const { value, increment, decrement, reset } = useCounter({
  defaultValue: 5.123,
  step: 0.1,
  precision: 2,
})

return (
  <VStack>
    <Text>Count: {value}</Text>
    <ButtonGroup.Root>
      <ButtonGroup.Item
        colorScheme="success"
        variant="subtle"
        onClick={() => increment()}
      >
        + 0.1
      </ButtonGroup.Item>
      <ButtonGroup.Item
        colorScheme="danger"
        variant="subtle"
        onClick={() => decrement()}
      >
        - 0.1
      </ButtonGroup.Item>
      <ButtonGroup.Item onClick={reset}>Reset</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

範囲外の値を許可する

範囲外の値を許可する場合は、keepWithinRangeをfalseに設定します。

Count: 5

const { value, increment, decrement, out, reset } = useCounter({
  defaultValue: 5,
  min: 0,
  max: 10,
  keepWithinRange: false,
})

return (
  <VStack>
    <Text color={out ? "danger" : "inherit"}>
      Count: {value} {out ? "(Out Of Range)" : ""}
    </Text>
    <ButtonGroup.Root>
      <ButtonGroup.Item
        colorScheme="success"
        variant="subtle"
        onClick={() => increment()}
      >
        + 1
      </ButtonGroup.Item>
      <ButtonGroup.Item
        colorScheme="danger"
        variant="subtle"
        onClick={() => decrement()}
      >
        - 1
      </ButtonGroup.Item>
      <ButtonGroup.Item onClick={reset}>Reset</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

フォーマットする

フォーマットする場合は、cast関数を使用します。

const { value, setValue, cast } = useCounter({
  defaultValue: 0,
  precision: 2,
})

return (
  <Input
    placeholder="Enter a number"
    value={value}
    onChange={(e) => setValue(e.target.value)}
    onBlur={(e) => cast(e.target.value)}
  />
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。