@uxf/core-react 11.35.0 → 11.38.3

package/README.md

@@ -1,7 +1,10 @@
 # UXF Core-React
 
 ## Hooks
+---
+### useBodyScrollLock
 
+Lock scrolling on body element. Useful for modals, popovers, etc.
 ```tsx
 import { useBodyScrollLock } from "@uxf/core-react/hooks/use-body-scroll-lock";
 import { useState } from "react";
@@ -19,17 +22,25 @@ useBodyScrollLock<HTMLDivElement>(innerRef, isOpen, {
 
 <div ref={innerRef}>Element which activates scroll lock on its parent elements.</div>
 ```
+---
+### isMounted
+Check if component is mounted.
 ```tsx
 import { useIsMounted } from "@uxf/core-react/hooks/use-is-mounted";
 
 const isMounted = useIsMounted();
 ```
+---
+### useIsomorphicLayoutEffect
+Returns `useEffect` on client and `useLayoutEffect` on server.
 ```tsx
 import { useIsomorphicLayoutEffect } from "@uxf/core-react/hooks/use-isomorphic-layout-effect";
 
 useIsomorphicLayoutEffect(() => {/* code */}, [/* deps */]);
 ```
-
+---
+### useKey
+Trigger callback on given key.
 ```tsx
 import { useKey } from "@uxf/core-react/hooks/use-key";
 import { useRef } from "react";
@@ -45,6 +56,9 @@ useKey<HTMLDivElement>("Enter", () => console.log("callback"), {
 
 <div ref={targetRef} tabIndex={0}>Element with callback triggerable by enter key.</div>
 ```
+---
+### useMinWindowWidth
+Returns boolean if window width is equal or greater than given value.
 ```tsx
 import { useMinWindowWidth } from "@uxf/core-react/hooks/use-min-window-width";
 
@@ -54,18 +68,25 @@ const isDesktopWithDebounce = useMinWindowWidth(1200, 200); // will be updated e
 const example = isDesktop ? "desktop" : "tablet";
 const debouncedExample = isDesktopWithDebounce ? "debouncedDesktop" : "debouncedTablet";
 ```
-
+---
+### usePagination
+Returns array of pagination items.
 ```ts
 import { usePagination } from "@uxf/core-react/hooks/use-pagination";
 
 const paginationItems = usePagination({ page: 1, count: 10 })
 ```
-
+---
+### useRafState
+Updates state only in the callback of `requestAnimationFrame`.
 ```tsx
 import { useRafState } from "@uxf/core-react/hooks/use-raf-state";
 
 const [state, setState] = useRafState<boolean>(false);
 ```
+---
+### useOnMount
+Calls the callback on component mount.
 ```tsx
 import { useOnUnmount } from "@uxf/core-react/hooks/use-on-unmount";
 
@@ -73,11 +94,17 @@ const exampleCallback = () => {};
 
 useOnUnmount(exampleCallback());
 ```
+---
+### useOnUpdate
+Calls the callback only on component update, except initial mount.
 ```tsx
 import { useOnUpdate } from "@uxf/core-react/hooks/use-on-update";
 
 useOnUpdate(() => {/* code */}, [/* deps */]);
 ```
+---
+### useWindowScroll
+Returns x and y scroll coordinates of window on scroll.
 ```tsx
 import { useWindowScroll } from "@uxf/core-react/hooks/use-window-scroll";
 
@@ -85,6 +112,9 @@ const windowScroll = useWindowScroll();
 
 const example = windowScroll && windowScroll.y > 100 ? "scroled" : "on top";
 ```
+---
+### useWindowSize
+Returns window width and height.
 ```tsx
 import { useWindowSize } from "@uxf/core-react/hooks/use-window-size";
 
@@ -92,6 +122,9 @@ const windowSize = useWindowSize();
 
 const example = windowSize && windowSize.width > 1200 ? "desktop" : "tablet";
 ```
+---
+### useFocusTrap
+Locks focus inside given element.
 ```tsx
 import { useFocusTrap } from "@uxf/core-react/hooks/use-focus-trap";
 import { useState } from "react";
@@ -102,6 +135,9 @@ const focusTrapRef = useFocusTrap(active);
 
 <div ref={focusTrapRef}>Element which trap focus inside if `active` is truthy.</div>
 ```
+---
+### useFocusReturn
+Returns focus to last active element.
 ```tsx
 import { useFocusReturn } from "@uxf/core-react/hooks/use-focus-return";
 import { useState } from "react";
@@ -111,6 +147,9 @@ const [active, setActive] = useState<boolean>();
 // Returns focus to last active element, e.g. in Modal or Popover
 useFocusReturn(active);
 ```
+---
+### useAnchorProps
+Returns props for anchor element.
 ```tsx
 import { useAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import { AnchorHTMLAttributes } from "react";
@@ -144,6 +183,9 @@ const anchorProps = useAnchorProps<Props>({
 <a {...anchorProps}>Click me</a>
 
 ```
+---
+### useButtonProps
+Returns props for button element.
 ```tsx
 import { useButtonProps } from "@uxf/core-react/hooks/use-button-props";
 import { ButtonHTMLAttributes } from "react";
@@ -175,6 +217,9 @@ const buttonProps = useButtonProps<Props>({
 
 <button {...buttonProps}>Click me</button>
 ```
+---
+### useClickableProps
+Returns props for clickable element.
 ```tsx
 import { useClickableProps } from "@uxf/core-react/hooks/use-clickable-props";
 import { HTMLAttributes } from "react";
@@ -206,6 +251,9 @@ const buttonProps = useClickableProps<Props>({
 
 <button {...buttonProps}>Click me</button>
 ```
+---
+### useMouseDragToScroll
+Allow to scroll element by dragging mouse.
 ```tsx
 import { useMouseDragToScroll } from "@uxf/core-react/hooks/use-mouse-drag-to-scroll";
 
@@ -215,6 +263,9 @@ const style = useMouseDragToScroll(scrollRef);
 
 <div style={style}>Drag to scroll</div>
 ```
+---
+### useInputFocus
+Manage focus states of input element.
 ```tsx
 import { useInputFocus } from "@uxf/core-react/hooks/use-input-focus";
 
@@ -227,6 +278,9 @@ const input = useInputFocus(focusRef, onBlur, onFocus);
 <button onClick={input.focus}>Focus input</button>
 <input onBlur={input.onBlur} onFocus={input.onFocus} ref={focusRef} />
 ```
+---
+### useLatest
+Allways returns latest value of given variable.
 ```tsx
 import { useLatest } from "@uxf/core-react/hooks/use-latest";
 
@@ -236,6 +290,9 @@ useEffect(() => {
   latestState.current(); // use newest state of 'someUnstableWhatever' without affecting this effetct update
 }, [latestState])
 ```
+---
+### usePrevious
+Returns previous value of given variable.
 ```tsx
 import { usePrevious } from "@uxf/core-react/hooks/use-previous";
 
@@ -245,3 +302,31 @@ useEffect(() => {
   previousState.current(); // use state of 'someUnstableWhatever' from previous render without affecting this effetct update
 }, [previousState])
 ```
+---
+### useToggle
+Returns boolean state and methods to toggle it.
+```tsx
+import { useToggle } from "@uxf/core-react/hooks/use-toggle";
+
+const [isVisible, toggleIsVisible, setVisible, setInvisible] = useToggle(false);
+
+<button onClick={toggleIsVisible}>Toggle visibility</button>
+```
+---
+### useIncrement
+Returns number state and methods to increment, decrement and reset.
+```tsx
+import { useIncrement } from "@uxf/core-react/hooks/use-increment";
+
+const [count, increment, decrement, reset] = useIncrement(5, 1);
+
+<button onClick={increment}>Toggle visibility</button>
+```
+---
+### useDebounce
+Returns the latest value after given delay.
+```tsx
+import { useDebounce } from "@uxf/core-react/hooks/use-debounce";
+
+const debouncedValue = useDebounce<string>("some value", 300);
+```

package/hooks/use-debounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/hooks/use-debounce.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebounce = useDebounce;
+const react_1 = require("react");
+const use_on_update_1 = require("./use-on-update");
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(value);
+    (0, use_on_update_1.useOnUpdate)(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay !== null && delay !== void 0 ? delay : 500);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

package/hooks/use-increment.d.ts

@@ -0,0 +1,2 @@
+import type { Noop } from "@uxf/core/types";
+export declare function useIncrement(defaultValue: number, step?: number): [number, Noop, Noop, Noop];

package/hooks/use-increment.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIncrement = useIncrement;
+const react_1 = require("react");
+function useIncrement(defaultValue, step = 1) {
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const incrementHandler = (0, react_1.useCallback)(() => setValue((prev) => prev + step), [step]);
+    const decrementHandler = (0, react_1.useCallback)(() => setValue((prev) => prev - step), [step]);
+    const resetHandler = (0, react_1.useCallback)(() => setValue(defaultValue), [defaultValue]);
+    return [value, incrementHandler, decrementHandler, resetHandler];
+}

package/hooks/use-increment.test.d.ts

@@ -0,0 +1 @@
+export {};

package/hooks/use-increment.test.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const use_increment_1 = require("./use-increment"); // Adjust the import based on your file structure
+describe("useIncrement Hook", () => {
+    it("should initialize with the default value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(5));
+        const [value] = result.current;
+        expect(value).toBe(5);
+    });
+    it("should increment the value by the step value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(5, 2));
+        const [value, incrementHandler] = result.current;
+        expect(value).toBe(5);
+        (0, react_1.act)(() => {
+            incrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(7); // 5 + 2
+    });
+    it("should decrement the value by the step value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(10, 3));
+        const [value, , decrementHandler] = result.current;
+        expect(value).toBe(10);
+        (0, react_1.act)(() => {
+            decrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(7); // 10 - 3
+    });
+    it("should reset the value to the default value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(20, 5));
+        const [value, incrementHandler, , resetHandler] = result.current;
+        expect(value).toBe(20);
+        (0, react_1.act)(() => {
+            incrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(25); // 20 + 5
+        (0, react_1.act)(() => {
+            resetHandler();
+        });
+        const [resetValue] = result.current;
+        expect(resetValue).toBe(20); // Reset back to default
+    });
+    it("should use a step of 1 if no step is provided", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(10));
+        const [value, incrementHandler, decrementHandler] = result.current;
+        expect(value).toBe(10);
+        (0, react_1.act)(() => {
+            incrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(11); // 10 + 1 (default step)
+        (0, react_1.act)(() => {
+            decrementHandler();
+        });
+        const [finalValue] = result.current;
+        expect(finalValue).toBe(10); // 11 - 1
+    });
+});

package/hooks/use-toggle.d.ts

@@ -0,0 +1,2 @@
+import type { Noop } from "@uxf/core/types";
+export declare function useToggle(defaultValue: boolean): [boolean, Noop, Noop, Noop];

package/hooks/use-toggle.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggle = useToggle;
+const react_1 = require("react");
+function useToggle(defaultValue) {
+    const [isOn, setIsOn] = (0, react_1.useState)(defaultValue);
+    const toggleHandler = (0, react_1.useCallback)(() => setIsOn((prev) => !prev), []);
+    const setTrueHandler = (0, react_1.useCallback)(() => setIsOn(true), []);
+    const setFalseHandler = (0, react_1.useCallback)(() => setIsOn(false), []);
+    return [isOn, toggleHandler, setTrueHandler, setFalseHandler];
+}

package/hooks/use-toggle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/hooks/use-toggle.test.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const use_toggle_1 = require("./use-toggle");
+describe("useToggle Hook", () => {
+    it("should initialize with the default value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_toggle_1.useToggle)(false));
+        const [isOn] = result.current;
+        expect(isOn).toBe(false);
+    });
+    it("should toggle the value when toggleHandler is called", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_toggle_1.useToggle)(false));
+        const [isOn, toggleHandler] = result.current;
+        expect(isOn).toBe(false);
+        (0, react_1.act)(() => {
+            toggleHandler();
+        });
+        const [isOnNew] = result.current;
+        expect(isOnNew).toBe(true);
+        (0, react_1.act)(() => {
+            toggleHandler();
+        });
+        const [isOnFinal] = result.current;
+        expect(isOnFinal).toBe(false);
+    });
+    it("should set the value to true when setTrueHandler is called", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_toggle_1.useToggle)(false));
+        const [isOn, , setTrueHandler] = result.current;
+        expect(isOn).toBe(false);
+        (0, react_1.act)(() => {
+            setTrueHandler();
+        });
+        const [isOnNew] = result.current;
+        expect(isOnNew).toBe(true);
+    });
+    it("should set the value to false when setFalseHandler is called", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_toggle_1.useToggle)(true));
+        const [isOn, , , setFalseHandler] = result.current;
+        expect(isOn).toBe(true);
+        (0, react_1.act)(() => {
+            setFalseHandler();
+        });
+        const [isOnNew] = result.current;
+        expect(isOnNew).toBe(false);
+    });
+});

package/package.json

@@ -1,24 +1,24 @@
 {
-  "name": "@uxf/core-react",
-  "version": "11.35.0",
-  "description": "UXF Core",
-  "author": "UX Fans s.r.o",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "tsc -P tsconfig.json",
-    "typecheck": "tsc --noEmit --skipLibCheck"
-  },
-  "dependencies": {
-    "@uxf/core": "11.35.0"
-  },
-  "peerDependencies": {
-    "react": ">=18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "18.3.5",
-    "react": "18.3.1"
-  }
-}
+    "name": "@uxf/core-react",
+    "version": "11.38.3",
+    "description": "UXF Core",
+    "author": "UX Fans s.r.o",
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "tsc -P tsconfig.json",
+        "typecheck": "tsc --noEmit --skipLibCheck"
+    },
+    "dependencies": {
+        "@uxf/core": "11.35.0"
+    },
+    "peerDependencies": {
+        "react": ">=18.2.0"
+    },
+    "devDependencies": {
+        "@types/react": "18.3.5",
+        "react": "18.3.1"
+    }
+}