SV5UI sv5ui v2.3.0
Hooks

useTimeout

Schedule a callback to run once after a delay, with proper runes teardown. Starts on mount. The delay may be a reactive getter - changing it restarts the timer automatically. Pass null as the delay to disable the timer. SSR-safe - no timer runs on the server.

Restart & cancel

Use the returned restart and cancel to control the timer imperatively.

Waiting…

<script lang="ts">
  import { useTimeout } from 'sv5ui';

  let message = $state('Waiting…');

  const timer = useTimeout(() => {
    message = 'Done!';
  }, 2000);
</script>

<p>{message}</p>
<button onclick={timer.restart}>Reset 2s timer</button>
<button onclick={timer.cancel}>Cancel</button>

Reactive delay

Pass a getter () => delay - whenever delay changes the timer restarts automatically with the new duration.

1000ms

Waiting…

<script lang="ts">
  import { useTimeout } from 'sv5ui';

  let delay = $state(1000);
  let fired = $state(false);

  // Changing delay restarts the timer automatically
  const timer = useTimeout(() => (fired = true), () => delay);
</script>

<input type="range" min="500" max="5000" step="500" bind:value={delay} />
<p>Delay: {delay}ms - fired: {fired}</p>
<button onclick={timer.restart}>Restart</button>

Parameters

ParameterTypeDefault
callback() => void-
delaynumber | null | (() => number | null)-

Return

PropertyType-
restart() => void-
cancel() => void-
useIntersectionObserver useInterval