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

use-interval

Calls function with a given interval

Import

Source

View source code

Docs

Edit this page

Package

@mantine/hooks

Usage

Page loaded 0 seconds ago

import { useState, useEffect } from 'react';
import { useInterval } from '@mantine/hooks';
import { Stack, Button, Text } from '@mantine/core';

function Demo() {
  const [seconds, setSeconds] = useState(0);
  const interval = useInterval(() => setSeconds((s) => s + 1), 1000);

  useEffect(() => {
    interval.start();
    return interval.stop;
  }, []);

  return (
    <Stack align="center">
      <Text>Page loaded <b>{seconds}</b> seconds ago</Text>
      <Button onClick={interval.toggle} color={interval.active ? 'red' : 'teal'}>
        {interval.active ? 'Stop' : 'Start'} counting
      </Button>
    </Stack>
  );
}

Auto invoke interval

To automatically start interval when component is mounted, set autoInvoke option to true:

import { useInterval } from '@mantine/hooks';

const interval = useInterval(
  () => console.log('Interval tick'),
  1000,
  { autoInvoke: true }
);

API

import { useInterval } from '@mantine/hook';

const { start, stop, toggle, active } = useInterval(fn, interval);

Arguments:

  • fn – function that is called at each interval tick
  • interval – amount of milliseconds between each tick

Return object:

  • start – start interval
  • stop – stop interval
  • toggle – toggle interval
  • active – current interval status

Definition

interface UseIntervalOptions {
  /** If set, the interval will start automatically when the component is mounted, `false` by default */
  autoInvoke?: boolean;
}

function useInterval(
  fn: () => void,
  interval: number,
  options?: UseIntervalOptions
): {
  start: () => void;
  stop: () => void;
  toggle: () => void;
  active: boolean;
};

Previous

use-idle

Next

use-merged-ref

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

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