Docs
useCounter

Manage a numeric state with useCounter, offering functions to increment, decrement, reset, and set a custom value.

Installation

pnpm dlx shadcn@latest add https://hookcn.ouassim.tech/r/use-counter

Usage

"use client"
 
import { useCounter } from "@/hooks/use-counter"
 
export function Component() {
  const { count, setCount, increment, decrement, reset } = useCounter(0)
 
  const multiplyBy2 = () => {
    setCount((x: number) => x * 2)
  }
 
  return (
    <>
      <p>Count is {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
      <button onClick={multiplyBy2}>Multiply by 2</button>
    </>
  )
}

API Reference

Parameters

NameTypeDescription
initialValue?numberThe initial value for the counter.

Returns

NameTypeDescription
countnumberThe current count value.
decrement() => voidFunction to decrement the counter by 1.
increment() => voidFunction to increment the counter by 1.
reset() => voidFunction to reset the counter to its initial value.
setCountDispatch<SetStateAction<number>>Function to set a specific value to the counter.