useInterval

This hook makes setInterval easy to use and control with some useful methods.

Parameters

the setInterval callback function.
and some options:

Name	Type	Description
timeout	Number	the `setInterval` timeout in `ms`.
startOnMount	Boolean	start automatically when the component is mounted (default is `false`).
deps	Array	dependency array (default is `[]`)

Props And Methods

`start()`, `stop()`, and `toggle()`

Use these two methods to start and stop the interval, or toggle between them using toggle:

const interval = useInterval(() => console.log('Hello!'), { timeout: 1000 });

interval.start(); // running
interval.stop(); // stopped

interval.toggle(); // running
interval.toggle(); // stopped

interval.toggle(true); // running
interval.toggle(false); // stopped

const interval = useInterval(() => console.log('Hello!'), { timeout: 1000 });

interval.start(); // running
interval.stop(); // stopped

interval.toggle(); // running
interval.toggle(); // stopped

interval.toggle(true); // running
interval.toggle(false); // stopped

`isRunning`

this value indicates whether the interval is running or not:

const interval = useInterval(() => console.log('Running...'), {
  timeout: 500,
  startOnMount: true
});

interval.isRunning; // true

interval.stop();

interval.isRunning; // false

const interval = useInterval(() => console.log('Running...'), {
  timeout: 500,
  startOnMount: true
});

interval.isRunning; // true

interval.stop();

interval.isRunning; // false

Example Usage

tsx

import { useCounter, useInterval } from 'react-pre-hooks';

export default function Counter() {
  const counter = useCounter();

  const interval = useInterval(() => counter.inc(), {
    timeout: 1000,
    startOnMount: true
  });

  return (
    <main>
      <p>{counter.value}</p>
      <button onClick={() => interval.toggle()}>
        {interval.isRunning ? 'Stop' : 'Start'}
      </button>
    </main>
  );
}

import { useCounter, useInterval } from 'react-pre-hooks';

export default function Counter() {
  const counter = useCounter();

  const interval = useInterval(() => counter.inc(), {
    timeout: 1000,
    startOnMount: true
  });

  return (
    <main>
      <p>{counter.value}</p>
      <button onClick={() => interval.toggle()}>
        {interval.isRunning ? 'Stop' : 'Start'}
      </button>
    </main>
  );
}

useInterval ​

Parameters ​

Props And Methods ​

start(), stop(), and toggle() ​

isRunning ​

Example Usage ​