useInterval.md

useInterval

A declarative interval hook based on Dan Abramov's article on overreacted.io. The interval can be paused by setting the delay to null.

Usage

import {useInterval, useState, useBoolean} from 'vue-next-use';

const Demo = {
  setup(){
      const [count, setCount] = useState(0);
      const [delay, setDelay] = useState(1000);
      const [isRunning, toggleIsRunning] = useBoolean(true);

      useInterval(
          () => {
              setCount(count + 1);
          },
          isRunning ? delay : null
      );

      return () => (
          <div>
              <div>
                  delay: <input value={delay} onChange={event => setDelay(Number(event.target.value))} />
              </div>
              <h1>count: {count}</h1>
              <div>
                  <button onClick={toggleIsRunning}>{isRunning ? 'stop' : 'start'}</button>
              </div>
          </div>
      );
  }
};

Reference

useInterval(callback, delay?: number)