useTimeout

window.setTimeout을 편리하게 사용할 수 있는 커스텀 훅 입니다.

option 값으로 숫자를 받을 수 있고, 객체로 받을 수 있습니다. 객체로 받을 경우 delay와 enabled 속성을 넘겨줄 수 있습니다.

Timeout을 직접 핸들링 할 수 있는 set, reset, clear 함수를 반환합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface TimeoutOptions {
  delay: number;
  enabled?: boolean;
}

typescript

function useTimeout(
  callback: () => void,
  options: number
): {
  set: () => void;
  clear: () => void;
  reset: () => void;
};

function useTimeout(
  callback: () => void,
  options: TimeoutOptions
): {
  set: () => void;
  clear: () => void;
  reset: () => void;
};

Options

Name	Type	Default	Description
options	number | TimeoutOptions	-	딜레이 시간(밀리초) 또는 { delay, enabled } 객체
options.delay	number	-	타임아웃 딜레이 시간(밀리초)
options.enabled	boolean	true	타임아웃 활성화 여부

Returns

Name	Type	Description
set	() => void	타임아웃을 시작하는 함수
clear	() => void	타임아웃을 취소하는 함수
reset	() => void	타임아웃을 초기화하고 다시 시작하는 함수

Usage

typescript

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

const Example = () => {
  const [number, setNumber] = useState(0);

  const { set, reset, clear } = useTimeout(() => {
    setNumber(number + 1);
  }, 1000);

  /*
   * useTimeout(() => {
   *   setNumber(number + 1);
   * }, { delay: 1000, enabled: true });
   */

  return (
    <div>
      <p>{number}</p>
      <div>
        <button onClick={() => set()}>set</button>
        <button onClick={() => reset()}>reset</button>
        <button onClick={() => clear()}>clear</button>
      </div>
    </div>
  );
};

Example

0