use-timeout

Calls function after given timeout

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/hooks

Usage

Random value:

import { useState } from 'react';
import { Button, Text, Group } from '@asuikit/core';
import { randomId, useTimeout } from '@asuikit/hooks';

function Demo() {
  const [value, setValue] = useState('');
  const { start, clear } = useTimeout(() => setValue(randomId()), 1000);

  return (
    <Group>
      <Button onClick={start} variant="outline">
        Start
      </Button>
      <Button onClick={clear} variant="outline" color="red">
        Clear
      </Button>
      <Text>Random value: {value}</Text>
    </Group>
  );
}

API

const { start, clear } = useTimeout(callback, delay, { autoInvoke: true });

Arguments:

callback – function that will be called after the timer elapses
delay – number of milliseconds the timer should wait before the specified function is executed
options: { autoInvoke } - determines whether the timer should be started on mount, defaults to false

Return object:

start - starts the timer
clear – cancels the timer

Definition

function useTimeout(
  callback: (...callbackParams: any[]) => void,
  delay: number,
  options?: {
    autoInvoke: boolean;
  }
): {
  start: (...callbackParams: any[]) => void;
  clear: () => void;
};

Go back

use-set-state – @asuikit/hooks

Up next

use-toggle – @asuikit/hooks

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter