---
title: useCounter
description: "`useCounter`は、数値を増加または減少させるためのカスタムフックです。"
links:
- source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-counter
---
```tsx
const { value, increment, decrement, reset } = useCounter({
defaultValue: 10,
})
return (
Count: {value}
increment()}
>
+ 1
decrement()}
>
- 1
Reset
)
```
## 使い方
```tsx
import { useCounter } from "@yamada-ui/react"
```
```tsx
import { useCounter } from "@/components/ui"
```
```tsx
import { useCounter } from "@workspaces/ui"
```
```tsx
const { value, valueAsNumber, update, increment, decrement, reset, cast, out } =
useCounter()
```
### デフォルトの値を設定する
デフォルトの値を設定する場合は、`defaultValue`に文字列または数値を設定します。
```tsx
const { value, increment, decrement, reset } = useCounter({
defaultValue: 10,
})
return (
Count: {value}
increment()}
>
+ 1
decrement()}
>
- 1
Reset
)
```
### 最小・最大値を設定する
最小値と最大値を設定する場合は、`min`または`max`に数値を設定します。
```tsx
const { value, increment, decrement, min, max, reset } = useCounter({
defaultValue: 5,
min: 0,
max: 10,
})
return (
Count: {value}
increment()}
disabled={max}
>
+ 1
decrement()}
disabled={min}
>
- 1
Reset
)
```
### ステップ値を設定する
ステップ値を設定する場合は、`step`に数値を設定します。
```tsx
const { value, increment, decrement, reset } = useCounter({
defaultValue: 0,
step: 5,
})
return (
Count: {value}
increment()}
>
+ 5
decrement()}
>
- 5
Reset
)
```
```tsx
const { value, increment, decrement } = useCounter({
defaultValue: 0,
})
return (
Count: {value}
{(step) => (
increment(step)}>
+ {step}
)}
{(step) => (
decrement(step)}>
- {step}
)}
)
```
### 小数点を設定する
小数点を設定する場合は、`precision`に数値を設定します。
```tsx
const { value, increment, decrement, reset } = useCounter({
defaultValue: 5.123,
step: 0.1,
precision: 2,
})
return (
Count: {value}
increment()}
>
+ 0.1
decrement()}
>
- 0.1
Reset
)
```
### 範囲外の値を許可する
範囲外の値を許可する場合は、`keepWithinRange`を`false`に設定します。
```tsx
const { value, increment, decrement, out, reset } = useCounter({
defaultValue: 5,
min: 0,
max: 10,
keepWithinRange: false,
})
return (
Count: {value} {out ? "(Out Of Range)" : ""}
increment()}
>
+ 1
decrement()}
>
- 1
Reset
)
```
### フォーマットする
フォーマットする場合は、`cast`関数を使用します。
```tsx
const { value, setValue, cast } = useCounter({
defaultValue: 0,
precision: 2,
})
return (
setValue(e.target.value)}
onBlur={(e) => cast(e.target.value)}
/>
)
```