use-timeout

Calls function after given timeout
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

Usage

Random value: 
import { useState } from 'react';
import { Button, Text, Group } from '@mantine/core';
import { randomId, useTimeout } from '@mantine/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 – @mantine/hooks
Up next
use-toggle – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter