feat(hooks): add useTimeout hook

Author: u3u

src/__tests__/useTimeout.test.ts

@@ -0,0 +1,29 @@
+import { onMounted, onUnmounted } from 'vue-function-api';
+import { useTimeout } from '..';
+import renderHook from '../util/renderHook';
+
+describe('useTimeout', () => {
+  it('should be defined', () => {
+    expect(useTimeout).toBeDefined();
+  });
+
+  it('should return true after 3000ms', () => {
+    const { vm } = renderHook<unknown>(() => {
+      jest.useFakeTimers();
+      const ready = useTimeout(3000);
+      expect(ready.value).toBe(false);
+
+      onMounted(() => {
+        expect(jest.getTimerCount()).toBe(1);
+        jest.runOnlyPendingTimers();
+        expect(ready.value).toBe(true);
+      });
+
+      onUnmounted(() => {
+        expect(jest.getTimerCount()).toBe(0);
+      });
+    });
+
+    vm.$destroy();
+  });
+});

src/index.ts

@@ -14,6 +14,7 @@ export { default as useActions } from './useActions';
 export { default as useRouter } from './useRouter';
 export { default as useRef } from './useRef';
 export { default as useMountedState } from './useMountedState';
+export { default as useTimeout } from './useTimeout';
 
 export default function install(Vue: VueConstructor) {
   Vue.mixin({ beforeCreate: setRuntimeVM });

src/useTimeout.ts

@@ -0,0 +1,18 @@
+import { value, onMounted, onUnmounted } from 'vue-function-api';
+
+export default function useTimeout(delay = 0) {
+  const ready = value(false);
+  let timerId: number;
+
+  onMounted(() => {
+    timerId = window.setTimeout(() => {
+      ready.value = true;
+    }, delay);
+  });
+
+  onUnmounted(() => {
+    window.clearTimeout(timerId);
+  });
+
+  return ready;
+}