useCounter

A custom hook for managing a counter, providing increment, decrement, reset, and other utilities.

Code

🔗 View source code

Interface

typescript

function useCounter(initialValue: number = 0): {
  counter: number;
  setCounter: React.Dispatch<React.SetStateAction<number>>;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

Parameters

Name	Type	Description
initialValue	number	The initial counter value. Defaults to 0

Returns

Name	Type	Description
counter	number	The current counter value.
setCounter	React.Dispatch<React.SetStateAction<number>>	A function to directly set the counter value.
increment	() => void	Increments the counter by 1.
decrement	() => void	Decrements the counter by 1.
reset	() => void	Resets the counter to its initial value.

Usage

typescript

import { useCounter } from '@modern-kit/react';

const Example = () => {
  const { counter, setCounter, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <div>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
        <button onClick={() => setCounter(20)}>Set to 20</button>
        <button onClick={reset}>Reset to 10</button>
      </div>
      <p>counter: {counter}</p>
    </div>
  );
};

Example

counter: 10