@uxf/core-react 11.36.0 → 11.42.0

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,6 +302,9 @@ 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";
 
@@ -252,7 +312,9 @@ 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";
 
@@ -260,3 +322,11 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/core-react",
-    "version": "11.36.0",
+    "version": "11.42.0",
     "description": "UXF Core",
     "author": "UX Fans s.r.o",
     "license": "MIT",
@@ -12,7 +12,7 @@
         "typecheck": "tsc --noEmit --skipLibCheck"
     },
     "dependencies": {
-        "@uxf/core": "11.35.0"
+        "@uxf/core": "11.42.0"
     },
     "peerDependencies": {
         "react": ">=18.2.0"