feat: add useTimeout hook (#65)

The useTimeout hook is used to execute a callback after a specified amount of time

.changeset/pretty-chicken-agree.md

@@ -0,0 +1,5 @@
+---
+'@raddix/use-timeout': major
+---
+
+Added the useTimeout hook

packages/interactions/use-timeout/README.md

@@ -0,0 +1,5 @@
+# useTimeout
+
+The `useTimeout` hook is used to execute a callback after a specified amount of time. It is similar to the `setTimeout` function, but it is declarative and can be cancelled.
+
+Please refer to the [documentation](https://www.raddix.website/docs/interactions/use-timeout) for more information.

packages/interactions/use-timeout/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@raddix/use-timeout",
+  "description": "A React hook for handling timeouts",
+  "version": "0.1.0",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "author": "Moises Machuca Valverde <rolan.machuca@gmail.com> (https://www.moisesmachuca.com)",
+  "homepage": "https://www.raddix.website",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gdvu/raddix.git"
+  },
+  "keywords": [
+    "react-hook",
+    "react-timeout-hook",
+    "react-timeout",
+    "react-use-timeout",
+    "use-timeout",
+    "use-timeout-hook",
+    "hook-timeout"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "lint": "eslint \"{src,tests}/*.{ts,tsx,css}\"",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "build": "tsup src --dts",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}

packages/interactions/use-timeout/src/index.ts

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+
+type UseTimeout = (cb: () => void, delay: number) => () => void;
+
+export const useTimeout: UseTimeout = (cb, delay) => {
+  const savedCallback = useRef(cb);
+  const id = useRef<NodeJS.Timeout | null>(null);
+
+  const clearId = () => {
+    if (!id.current) return;
+    clearTimeout(id.current);
+    id.current = null;
+  };
+
+  useEffect(() => {
+    savedCallback.current = cb;
+  }, [cb]);
+
+  useEffect(() => {
+    const tick = () => savedCallback.current();
+    id.current = setTimeout(tick, delay);
+    return () => clearId();
+  }, [delay]);
+
+  return clearId;
+};

packages/interactions/use-timeout/tests/use-timeout.test.ts

@@ -0,0 +1,59 @@
+import { renderHook } from '@testing-library/react';
+import { useTimeout } from '../src';
+
+describe('useTimeout test:', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('the timeout should work', () => {
+    const callback = jest.fn();
+    renderHook(() => useTimeout(callback, 1000));
+
+    expect(callback).not.toBeCalled();
+    jest.advanceTimersByTime(2000);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('should clear the timeout when the component unmounts', () => {
+    const callback = jest.fn();
+    const { unmount } = renderHook(() => useTimeout(callback, 1000));
+
+    expect(callback).not.toBeCalled();
+    unmount();
+    jest.advanceTimersByTime(2000);
+    expect(callback).not.toBeCalled();
+  });
+
+  it('should clear the timeout when the delay changes', () => {
+    const callback = jest.fn();
+    const { rerender } = renderHook(
+      ({ delay }) => useTimeout(callback, delay),
+      {
+        initialProps: { delay: 1000 }
+      }
+    );
+
+    expect(callback).not.toBeCalled();
+    rerender({ delay: 2000 });
+    jest.advanceTimersByTime(1000);
+    expect(callback).not.toBeCalled();
+    jest.advanceTimersByTime(4000);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('should stop the timeout when the clear function is called', () => {
+    const callback = jest.fn();
+    const { result } = renderHook(() => useTimeout(callback, 4000));
+
+    expect(callback).not.toBeCalled();
+    jest.advanceTimersByTime(2000);
+    result.current();
+    jest.advanceTimersByTime(2000);
+    expect(callback).not.toBeCalled();
+  });
+});