use-timeout

Calls function in 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}>Start</Button>
      <Button onClick={clear} 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;
};

use-text-selection

use-did-update

Welcome to Mantine, React components library that you always wished for

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