useTimeout

A custom hook that makes it convenient to use window.setTimeout.

The option value can be passed as a number or as an object. When passed as an object, you can provide delay and enabled properties.

Returns set, reset, and clear functions to manually control the timeout.

Code

🔗 View source 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 in milliseconds, or a { delay, enabled } object
options.delay	number	-	Timeout delay in milliseconds
options.enabled	boolean	true	Whether the timeout is enabled

Returns

Name	Type	Description
set	() => void	Function to start the timeout
clear	() => void	Function to cancel the timeout
reset	() => void	Function to reset and restart the timeout

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