useCounter

카운터를 관리하는 커스텀 훅으로, 증가, 감소 및 리셋 기능 등을 제공합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

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

Usage

typescript

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

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

  return (
    <div>
      <div>
        <button onClick={increment}>더하기</button>
        <button onClick={decrement}>더하기</button>
        <button onClick={() => setCounter(20)}>20으로 셋팅</button>
        <button onClick={reset}>10으로 리셋</button>
      </div>
      <p>counter: {counter}</p>
    </div>
  );
};

Example

counter: 10