hooks / useDebounce

hooks/use-debounced-callback/.npmignore

@@ -0,0 +1 @@
+src

hooks/use-debounced-callback/README.md

@@ -0,0 +1,9 @@
+# `@byndyusoft-ui/use-debounced-callback`
+---
+> A React hook that uses for delaying the execution of functions updates until a specified time period has passed without any further changes
+
+### Installation
+
+```
+npm i @byndyusoft-ui/use-debounced-callback
+```

hooks/use-debounced-callback/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@byndyusoft-ui/use-debounced-callback",
+  "version": "0.0.0",
+  "description": "Byndyusoft UI React Hook",
+  "keywords": [
+    "byndyusoft",
+    "byndyusoft-ui",
+    "react",
+    "hook",
+    "debounce"
+  ],
+  "author": "Anastasia Vasenina <vasenina@byndyusoft.com>",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-debounced-callback#readme",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Byndyusoft/ui.git"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rimraf dist",
+    "lint": "eslint src --config ../../eslint.config.js",
+    "test": "jest --config ../../jest.config.js --roots hooks/use-debounced-callback/src"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

hooks/use-debounced-callback/src/index.ts

@@ -0,0 +1,2 @@
+import useDebouncedCallback from './useDebouncedCallback';
+export default useDebouncedCallback;

hooks/use-debounced-callback/src/useDebouncedCallback.stories.css

@@ -0,0 +1,10 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+input{
+    max-height: 40px;
+    width: 100px;     
+}

hooks/use-debounced-callback/src/useDebouncedCallback.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+import Readme from '../README.md';
+import { Markdown } from '@storybook/blocks';
+
+<Meta title="hooks/useDebouncedCallback" />
+
+<Markdown>{Readme}</Markdown>

hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import useDebouncedCallback from './useDebouncedCallback';
+import './useDebouncedCallback.stories.css';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Template>;
+
+const oldValue = 'old value';
+const newValue = 'new value';
+const timeout = 2000;
+
+const Template = () => {
+    const [value, setValue] = useState(oldValue);
+    const setDebounceValue = useDebouncedCallback(setValue, timeout);
+
+    return (
+        <div className="container">
+            <span>Value: {value}</span>
+            <button onClick={() => setDebounceValue(newValue)}>debounced change</button>
+            <button onClick={() => setValue(newValue)}>change</button>
+            <button onClick={() => setValue(oldValue)}>reset</button>
+        </div>
+    );
+};
+
+export const HookStory: Story = {
+    decorators: [() => <Template />]
+};
+
+const meta: Meta<typeof Template> = {
+    title: 'hooks/useDebouncedCallback',
+    component: Template
+};
+
+export default meta;

hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx

@@ -0,0 +1,27 @@
+import { waitFor } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import useDebouncedCallback from './useDebouncedCallback';
+
+const oldValue = 'old value';
+const newValue = 'new value';
+const timeout = 2000;
+
+describe('hooks/useDebouncedCallback', () => {
+    test('useDebouncedCallback works', () => {
+        let value = oldValue;
+        const handle = () => (value = newValue);
+        const { result } = renderHook(() => useDebouncedCallback(handle, timeout));
+        const setDebounceValue = result.current;
+        act(() => {
+            setDebounceValue();
+        });
+
+        expect(value).toEqual(oldValue);
+        waitFor(
+            () => {
+                expect(value).toEqual(newValue);
+            },
+            { timeout: 2500 }
+        );
+    });
+});

hooks/use-debounced-callback/src/useDebouncedCallback.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+
+export default function useDebouncedCallback<A extends any[]>(
+    callback: (...args: A) => void,
+    delay: number
+): (...args: A) => void {
+    const argsRef = useRef<A>();
+    const timeout = useRef<ReturnType<typeof setTimeout>>();
+
+    function cleanup() {
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+    }
+
+    useEffect(() => cleanup, []);
+
+    const setDebouncedValue = (...args: A) => {
+        argsRef.current = args;
+        cleanup();
+
+        timeout.current = setTimeout(() => {
+            if (argsRef.current) {
+                callback(...argsRef.current);
+            }
+        }, delay);
+    };
+
+    return setDebouncedValue;
+}

hooks/use-debounced-callback/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "module": "commonjs",
+    "target": "es6"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "src/*.tests.ts"]
+}

hooks/use-debounced-value/.npmignore

@@ -0,0 +1 @@
+src

hooks/use-debounced-value/README.md

@@ -0,0 +1,9 @@
+# `@byndyusoft-ui/use-debounced-value`
+---
+> A React hook that uses to delay update state updates until a specified time period has passed without any further changes
+
+### Installation
+
+```
+npm i @byndyusoft-ui/use-debounced-value
+```

hooks/use-debounced-value/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@byndyusoft-ui/use-debounced-value",
+  "version": "0.0.0",
+  "description": "Byndyusoft UI React Hook",
+  "keywords": [
+    "byndyusoft",
+    "byndyusoft-ui",
+    "react",
+    "hook",
+    "debounce"
+  ],
+  "author": "Anastasia Vasenina <vasenina@byndyusoft.com>",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-debounced-value#readme",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Byndyusoft/ui.git"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rimraf dist",
+    "lint": "eslint src --config ../../eslint.config.js",
+    "test": "jest --config ../../jest.config.js --roots hooks/use-debounced-value/src"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

hooks/use-debounced-value/src/index.ts

@@ -0,0 +1,2 @@
+import useDebouncedValue from './useDebouncedValue';
+export default useDebouncedValue;

hooks/use-debounced-value/src/useDebouncedValue.stories.css

@@ -0,0 +1,10 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+input{
+    max-height: 40px;
+    width: 100px;     
+}

hooks/use-debounced-value/src/useDebouncedValue.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+import Readme from '../README.md';
+import { Markdown } from '@storybook/blocks';
+
+<Meta title="hooks/useDebouncedValue" />
+
+<Markdown>{Readme}</Markdown>

hooks/use-debounced-value/src/useDebouncedValue.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import useDebouncedValue from './useDebouncedValue';
+import './useDebouncedValue.stories.css';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Template>;
+
+const Template = () => {
+    const [debouncedValue, setDebouncedValue] = useDebouncedValue('', 2000);
+
+    return (
+        <div className="container">
+            <span>
+                Debounced value: <span>{debouncedValue}</span>
+            </span>
+            <input onChange={e => setDebouncedValue(e.target.value)} />
+            <button onClick={() => setDebouncedValue('10000')}>set debounced value</button>
+        </div>
+    );
+};
+
+export const HookStory: Story = {
+    decorators: [() => <Template />]
+};
+
+const meta: Meta<typeof Template> = {
+    title: 'hooks/useDebouncedValue',
+    component: Template
+};
+
+export default meta;

hooks/use-debounced-value/src/useDebouncedValue.tests.tsx

@@ -0,0 +1,25 @@
+import { waitFor } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import useDebouncedValue from './useDebouncedValue';
+
+const oldValue = 'old value';
+const newValue = 'new value';
+const timeout = 2000;
+
+describe('hooks/useDebouncedValue', () => {
+    test('useDebouncedValue works', () => {
+        const { result } = renderHook(() => useDebouncedValue(oldValue, timeout));
+        const [debouncedValue, setDebouncedValue] = result.current;
+        expect(debouncedValue).toEqual(oldValue);
+        act(() => {
+            setDebouncedValue(newValue);
+        });
+        expect(debouncedValue).toEqual(oldValue);
+        waitFor(
+            () => {
+                expect(debouncedValue).toEqual(newValue);
+            },
+            { timeout: 2500 }
+        );
+    });
+});

hooks/use-debounced-value/src/useDebouncedValue.ts

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+import useDebouncedCallback from '@byndyusoft-ui/use-debounced-callback';
+
+export default function useDebouncedValue(value: string, delay = 300): [string, (value: string) => void] {
+    const [debouncedValue, setValue] = useState(value);
+
+    const setDebounceValue = useDebouncedCallback(setValue, delay);
+
+    return [debouncedValue, setDebounceValue];
+}

hooks/use-debounced-value/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "module": "commonjs",
+    "target": "es6"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "src/*.tests.ts"]
+}