useTimeout.md

useTimeout

Re-renders the component after a specified number of milliseconds.
Provides handles to cancel and/or reset the timeout.

Usage

import { useTimeout } from 'vue-next-use';

const TestComponent = {
    setup(){
        const ms = props.ms || 5000;
        const [isReady, cancel] = useTimeout(ms);

        return () => (
            <div>
              { isReady() ? 'I\'m reloaded after timeout' : `I will be reloaded after ${ ms / 1000 }s` }
              { isReady() === false ? <button onClick={ cancel }>Cancel</button> : '' }
            </div>
        );
    }
}

const Demo = () => {
  return (
    <div>
      <TestComponent />
      <TestComponent ms={ 10000 } />
    </div>
  );
};

Reference

const [
    isReady: () => boolean | null,
    cancel: () => void,
    reset: () => void,
] = useTimeout(ms: number = 0);

• isReady :()=>boolean|null - function returning current timeout state:
  • false - pending re-render
  • true - re-render performed
  • null - re-render cancelled
• cancel :()=>void - cancel the timeout (component will not be re-rendered)
• reset :()=>void - reset the timeout