use-interval

Wrapper around window.setInterval
Import

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