use-interval

Wrapper around window.setInterval
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 { Group, 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'}
        variant="outline"
      >
        {interval.active ? 'Stop' : 'Start'} counting
      </Button>
    </Stack>
  );
}

API

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

Arguments:

  • fn – function that will be 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

function useInterval(
  fn: () => void,
  interval: number
): {
  start: () => void;
  stop: () => void;
  toggle: () => void;
  active: boolean;
};
Go back
use-input-state – @mantine/hooks
Up next
use-list-state – @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