hooks / useDebounce

hooks/use-debounce-callback/.npmignore

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

hooks/use-debounce-callback/README.md

@@ -0,0 +1,9 @@
+# `@byndyusoft-ui/use-debounce-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-debounce-callback
+```

hooks/use-debounce-callback/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@byndyusoft-ui/use-debounce-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-debounce#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"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

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

hooks/use-debounce-callback/src/useDebounceCallback.stories.css

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

hooks/use-debounce-callback/src/useDebounceCallback.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/useDebounce" />
+
+<Markdown>{Readme}</Markdown>

hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import useDebounceCallback from './useDebounceCallback';
+import './useDebounceCallback.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 = useDebounceCallback(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/useDebounceCallback',
+    component: Template
+};
+
+export default meta;

hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { render, screen, RenderResult, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import useDebounceCallback from './useDebounceCallback';
+
+const oldValue = 'old value';
+const newValue = 'new value';
+const timeout = 2000;
+const debouncedChangeLabel = 'debounced change label';
+const changeLabel = 'change label';
+const resetLabel = 'reset label';
+
+const Setup = (): JSX.Element => {
+    const [value, setValue] = useState(oldValue);
+    const setDebounceValue = useDebounceCallback(setValue, timeout);
+
+    return (
+        <div className="container">
+            <span>
+                Value: <span>{value}</span>
+            </span>
+            <button aria-label={debouncedChangeLabel} onClick={() => setDebounceValue(newValue)}>
+                debounced change
+            </button>
+            <button aria-label={changeLabel} onClick={() => setValue(newValue)}>
+                change
+            </button>
+            <button aria-label={resetLabel} onClick={() => setValue(oldValue)}>
+                reset
+            </button>
+        </div>
+    );
+};
+
+describe('hooks/useDebounceCallback', () => {
+    test('useDebounceCallback works', async () => {
+        render(<Setup />);
+
+        const debouncedChangeButton = await screen.findByLabelText(debouncedChangeLabel);
+        const changeButton = await screen.findByLabelText(changeLabel);
+        const resetButton = await screen.findByLabelText(resetLabel);
+        expect(screen.findByText(oldValue)).toBeInTheDocument();
+        userEvent.click(changeButton);
+        expect(screen.findByText(newValue)).toBeInTheDocument();
+        userEvent.click(resetButton);
+        expect(screen.findByText(oldValue)).toBeInTheDocument();
+        userEvent.click(debouncedChangeButton);
+        expect(screen.findByText(oldValue)).toBeInTheDocument();
+        await waitFor(
+            () => {
+                expect(screen.findByText(newValue)).toBeInTheDocument();
+            },
+            { timeout: 2500 }
+        );
+    });
+});

hooks/use-debounce-callback/src/useDebounceCallback.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-debounce-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-debounce/.npmignore

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

hooks/use-debounce/README.md

@@ -0,0 +1,9 @@
+# `@byndyusoft-ui/use-debounce`
+---
+> 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-debounce
+```

hooks/use-debounce/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@byndyusoft-ui/use-debounce",
+  "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-debounce#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"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

hooks/use-debounce/src/index.ts

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

hooks/use-debounce/src/useDebounce.stories.css

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

hooks/use-debounce/src/useDebounce.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/useDebounce" />
+
+<Markdown>{Readme}</Markdown>

hooks/use-debounce/src/useDebounce.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import useDebounce from './useDebounce';
+import './useDebounce.stories.css';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Template>;
+
+const Template = () => {
+    const [debouncedValue, setDebouncedValue] = useDebounce('', 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/useDebounce',
+    component: Template
+};
+
+export default meta;

hooks/use-debounce/src/useDebounce.tests.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import useDebounce from './useDebounce';
+
+const debouncedValueLabel = 'debounced value';
+const inputValue = '1111';
+
+const Setup = (): JSX.Element => {
+    const [debouncedValue, setDebouncedValue] = useDebounce('', 2000);
+
+    return (
+        <div className="container">
+            <span>
+                Debounced value: <span aria-label={debouncedValueLabel}>{debouncedValue}</span>
+            </span>
+            <input onChange={e => setDebouncedValue(e.target.value)} />
+        </div>
+    );
+};
+
+describe('hooks/useDebounce', () => {
+    test('useDebounce works', async () => {
+        render(<Setup />);
+
+        const input = await screen.findByRole('textbox');
+        userEvent.type(input, inputValue);
+
+        await waitFor(
+            () => {
+                expect(screen.getByLabelText(debouncedValueLabel)).toHaveTextContent(inputValue);
+            },
+            { timeout: 2100 }
+        );
+    });
+});

hooks/use-debounce/src/useDebounce.ts

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

hooks/use-debounce/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-window-size/package.json

@@ -10,7 +10,7 @@
     "window",
     "size"
   ],
-  "author": "Nastya Vasenina <vasenina@byndyusoft.com>",
+  "author": "Anastasia Vasenina <vasenina@byndyusoft.com>",
   "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-window-size#readme",
   "license": "Apache-2.0",
   "main": "dist/index.js",