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;
};
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback