useCounter

You can use the useCounter hook to increment, decrement, and reset the counter value, making it easy to implement counters in your components.

You can also configure the counter with optional parameters for minimum, maximum, and step values, allowing for more control over the counter behavior.

Example

Live Preview

Install

npx shadcn@latest add https://unlogg.com/r/use-counter.json

pnpm dlx shadcn@latest add https://unlogg.com/r/use-counter.json

bunx shadcn@latest add https://unlogg.com/r/use-counter.json

Notes

Provides a simple way to manage counter state.
Includes functions to increment, decrement, and reset the counter.
Supports optional configuration for minimum, maximum, and step values.
When max or min values are set, the counter will not exceed these limits when incrementing or decrementing.

API Reference

Parameters

Prop	Type	Default
`options?`	`{ min?: number; max?: number; step?: number; }`	`{}`
`initialValue?`	`number`	`0`

Returns

Prop	Type	Default
`reset?`	`() => void`	-
`decrement?`	`() => void`	-
`increment?`	`() => void`	-
`setCount?`	`React.Dispatch<React.SetStateAction<number>>`	-
`count?`	`number`	-