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 React, { 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 (
    <Group position="center" direction="column">
      <Text>Page loaded <b>{seconds}</b> seconds ago</Text>
      <Button
        onClick={interval.toggle}
        color={interval.active ? 'red' : 'teal'}
        variant="light"
      >
        {interval.active ? 'Stop' : 'Start'} counting
      </Button>
    </Group>
  );
}

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;
};