react-hook-toolkit 1.0.15 → 1.0.17

package/README.md

@@ -1,7 +1,7 @@
 
 **react-hook-toolkit** package offers a comprehensive set of hooks to simplify React development. It includes hooks for managing state, handling API requests, optimizing performance, and improving user interactions. Key features include data fetching, form handling, local storage management, debouncing/throttling, window size tracking, event listeners, and more. These hooks are designed to enhance productivity by providing reusable, easy-to-use solutions for common tasks.
 
-**Note : This package is written in TypeScript and offers full support for all modern browsers.**
+**Note : This lightweight and type-safe package is written in TypeScript and offers full support for all hooks across all modern browsers.**
 
 ### Installation
 
@@ -15,20 +15,22 @@ yarn add react-hook-toolkit
 pnpm add react-hook-toolkit
 ```
 
+### **Authors**
+
+![NPM](https://img.shields.io/badge/Author-NPM_Teams-red)   ![npm](https://img.shields.io/npm/v/react-hook-toolkit?color=1C939D)   ![npm](https://img.shields.io/npm/dt/react-hook-toolkit)   ![NPM](https://img.shields.io/npm/l/react-hook-toolkit)   ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/react-hook-toolkit)
+
 ### **Browser Support**  
 
 | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png) | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png)  | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png)
 | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
 | Latest ✔                                                                                          | Latest ✔                                                                                             | Latest ✔                                                                                          | Latest ✔                                                                                       | Latest ✔                                                                                    | 
 
-### **Authors**
-
-![NPM](https://img.shields.io/badge/Author-Shivaji_(React_Expert)_&_Shyamal_(JS_Expert)-red)   ![npm](https://img.shields.io/npm/v/react-hook-toolkit?color=1C939D)   ![npm](https://img.shields.io/npm/dt/react-hook-toolkit)   ![NPM](https://img.shields.io/npm/l/react-hook-toolkit)   ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/react-hook-toolkit)
 
-## Features  
+###  **Features**
 Here's the properly structured documentation with clear purpose explanations:
 
-----------------------------------------------------  **Custom Hooks**  ------------------------------------------------
+------------------------------------------ **Custom Hooks**  ------------------------------------------------
+
 
 📌 **useAxios**   
 A custom hook for making API requests using Axios. It manages request states (`loading`, `error`, `data`) and provides a function (`makeRequest`) to initiate a request.
@@ -39,67 +41,30 @@ useEffect(() => {
   makeRequest('/users', 'GET');
 }, []);
 ```
-
-📌 **useDrawer**  
-A custom hook for managing application drawer state. It provides control over drawer visibility (`drawerOpen`) and active menu selection (`currentMainMenu`), with methods to toggle these states.
-
-```tsx
-const { 
-  drawerOpen, 
-  currentMainMenu,
-  openDrawer, 
-  closeDrawer,
-  setCurrentMainMenu 
-} = useDrawer();
-
-// Example usage:
-<button onClick={openDrawer}>Open Menu</button>
-<button onClick={() => setCurrentMainMenu('settings')}>
-  Show Settings
-</button>
-```
-
 ---
-
-  📌 **useAdvReducer**  
-A custom reducer function that takes an `initialState` and an object of actions, returning a new state based on the action type. 
+📌 **useFetch**  
+Provides an easy way to fetch data with hooks, managing loading, data, and error states.
 
 ```ts
-const reducer = useAdvReducer(initialState, {
-  increment: (state) => ({ count: state.count + 1 }),
-});
-const [state, dispatch] = useReducer(reducer, initialState);
+const { data, loading, error } = useFetch('/api/data');
 ```
-
 ---
-
-  📌 **useFetch**  
-Fetches data from a given URL and manages the loading, error, and data states.
+  📌 **useFetchRetry**  
+Performs an HTTP request with retry logic, retrying a specified number of times upon failure before returning an error.
 
 ```ts
-const { data, loading, error } = useFetch<User[]>('/api/users');
+const { data, loading, error } = useFetchRetry('/api/user', { method: 'GET' }, 3);
 ```
-
 ---
-
-  📌 **useLocalStorage**  
- A hook to persist state in `localStorage`. It initializes state from `localStorage` and updates it whenever the value changes.
+  📌 **useAsync**  
+Handles the state of an asynchronous function, including loading, success, and error states, with the ability to trigger the execution of the async operation.
 
 ```ts
-const [token, setToken] = useLocalStorage('authToken', '');
-```
-
----
-
-  📌 **useToggle**  
-A simple boolean toggle hook that returns a state and a function to toggle its value.
+const { execute, status, value, error } = useAsync(fetchUser);
 
-```ts
-const [isOpen, toggle] = useToggle(false);
+execute(); // ➝ runs the async function
 ```
-
 ---
-
   📌 **useDebounce**  
 Delays updating the state until after a specified delay, useful for preventing frequent updates (e.g., handling user input).
 
@@ -108,44 +73,44 @@ const debouncedSearch = useDebounce(searchText, 500);
 ```
 
 ---
-
-  📌 **useThrottle**  
-Limits how often a value updates within a given time interval, useful for performance optimization.
+  📌 **useDebouncedCallback**  
+Delays the execution of a callback function until after a specified delay, resetting the delay on each call to prevent frequent execution.
 
 ```ts
-const throttledScroll = useThrottle(scrollValue, 300);
-```
+const debounced = useDebouncedCallback(() => search(input), 300);
 
+input.onChange = debounced;
+```
 ---
-
-  📌 **usePrevious**  
-Returns the previous value of a state or prop.
+📌 **useDebouncedValue**  
+Returns a debounced version of a value.
 
 ```ts
-const prevValue = usePrevious(currentValue);
+const debouncedValue = useDebouncedValue(value, 300);
 ```
-
 ---
-
-  📌 **useMediaQuery**  
-Checks if a media query matches the current viewport size and updates the state accordingly.
+  📌 **useThrottle**  
+Limits how often a value updates within a given time interval, useful for performance optimization.
 
 ```ts
-const isMobile = useMediaQuery('(max-width: 768px)');
+const throttledScroll = useThrottle(scrollValue, 300);
 ```
 
 ---
-
-  📌 **useClipboard**  
-Copies text to the clipboard and provides a state to indicate if copying was successful.
+  📌 **useDelay**  
+Delays the update of a value for a specified amount of time before reflecting it in the state.
 
 ```ts
-const [copied, copyToClipboard] = useClipboard();
-copyToClipboard('Text to copy');
+const delayedValue = useDelay(value, 500);
 ```
-
 ---
+  📌 **useTimer**  
+Starts a countdown timer that updates the time every second, returning the current time and any errors.
 
+```ts
+const { time, error } = useTimer(60); // starts from 60 and counts down
+```
+---
   📌 **useInterval**  
 Runs a callback function at a specified time interval and clears it when the delay is null or the component unmounts.
 
@@ -154,45 +119,7 @@ useInterval(() => {
   console.log('Tick');
 }, 1000);
 ```
-
----
-
-  📌 **useWindowSize**  
-Tracks the width and height of the browser window and updates when resized. 
-
-```ts
-const { width, height } = useWindowSize();
-```
-
----
-
-  📌 **useKeyPress**  
-Detects whether a specific key is being pressed or released.
-
-```ts
-const isEnterPressed = useKeyPress('Enter');
-```
-
----
-
-  📌 **useOnlineStatus**  
-Monitors the user's network connection status (online/offline).
-
-```ts
-const isOnline = useOnlineStatus();
-```
-
----
-
-  📌 **useScrollPosition**  
-Tracks the horizontal (x) and vertical (y) scroll positions of the window.
-
-```ts
-const { x, y } = useScrollPosition();
-```
-
 ---
-
   📌 **useTimeout**  
 Executes a function after a specified delay and cleans up automatically when dependencies change.
 
@@ -202,15 +129,6 @@ useTimeout(() => {
 }, 2000);
 ```
 
----
-
-  📌 **useDarkMode**  
-Detects and toggles dark mode based on the user's system preference.
-
-```ts
-const [isDarkMode, toggleDarkMode] = useDarkMode();
-```
-
 ---
 
   📌 **useForm**  
@@ -226,631 +144,531 @@ validate({
   email: (val) => (!val.includes('@') ? 'Invalid email' : null),
 });
 ```
-
 ---
-
-  📌 **useArray**
-Provides an array state with helper functions to manipulate it, including setting, adding, removing by index, and clearing elements.
+📌 **useFormSubmit**  
+ Handles form submission with loading/error states and success callbacks.
 
 ```ts
-const { array, set, push, removeByIndex, clear } = useArray([1, 2, 3]);
+const { submit, isLoading, error } = useFormSubmit(apiCall, {
+  onSuccess: (data) => console.log('Saved!', data)
+});
 
-push(4);            // ➝ [1, 2, 3, 4]
-removeByIndex(1);   // ➝ [1, 3, 4]
-clear();            // ➝ []
+// Example
+submit(formData);
 ```
-
 ---
-
-  📌 **useStepper**  
-Manages step-based navigation by keeping track of the current step index and providing functions to move forward, backward, and reset.
+📌 **useSmartForm**  
+ Complete form management with validation, submission, and state handling.
 
 ```ts
-const { activeStep, handleNext, handleBack, handleReset, isFirstStep, isLastStep } = useStepper(5);
+const { register, handleSubmit, errors } = useSmartForm({
+  initialValues,
+  validationSchema,
+  onSubmit: (data) => console.log(data)
+});
 
-handleNext(); // ➝ advances step
-handleBack(); // ➝ goes back
-handleReset(); // ➝ step 0
+// Example
+<input {...register('email') />
+<button onClick={handleSubmit}>Save</button>
 ```
-
 ---
-
-  📌 **useTimeoutFn**  
-Executes a callback function after a specified delay and provides functions to reset or clear the timeout.  
+📌 **useCrossFieldValidation**  
+ Handles complex validation rules that depend on multiple fields.
 
 ```ts
-const { reset, clear } = useTimeoutFn(() => doSomething(), 1000);
+const { errors, validate } = useCrossFieldValidation({
+  rules: {
+    password: (val, { confirmPassword }) => val === confirmPassword,
+  },
+  initialValues
+});
 
-reset(); // ➝ restarts timeout
-clear(); // ➝ clears timeout
+// Example
+validate('password', 'secret123', { confirmPassword: 'secret123' });
 ```
 
 ---
 
-  📌 **useDebouncedCallback**  
-Delays the execution of a callback function until after a specified delay, resetting the delay on each call to prevent frequent execution.
+📌 **useFieldArray**  
+ Manages dynamic arrays of form fields with add/remove/reorder operations.
 
 ```ts
-const debounced = useDebouncedCallback(() => search(input), 300);
-
-input.onChange = debounced;
-```
-
----
-
-  📌 **useScrollLock**  
-Locks or unlocks scrolling on the webpage when the `lock` parameter changes.
+const { fields, append, remove, move } = useFieldArray(initialItems);
 
-```ts
-useScrollLock(true); // ➝ disables body scroll
+// Example
+append({ name: '', email: '' });
+remove(0); // Remove first item
+move(1, 0); // Move second item to first position
 ```
-
 ---
-
-  📌 **useResizeObserver**  
-Observes and returns the dimensions of an HTML element using the `ResizeObserver` API.
+📌 **useFormWizard**  
+ Manages multi-step forms with navigation between steps.
 
 ```ts
-const size = useResizeObserver(ref);
-
-// size = { width: 200, height: 100 }
-```
-
----
-
-  📌 **useMousePosition**  
-Tracks the user's mouse position in real-time and returns the coordinates. 
+const { currentStep, next, prev, goto } = useFormWizard(steps.length);
 
-```ts
-const { x, y } = useMousePosition();
+// Example
+next(); // Move to next step
+goto(3); // Jump to step 4
 ```
 
 ---
-
-  📌 **useScrollDirection**  
-Determines whether the user is scrolling up or down based on window scroll position changes.
+ 📌 **usePersistedForm**  
+ Automatically persists form state to localStorage/sessionStorage and restores it on page reload.
 
 ```ts
-const direction = useScrollDirection(); // ➝ 'up' | 'down'
-```
-
----
-
-  📌 **useImageLoader**  
-Loads an image and provides `loaded` and `error` states to track its loading status.
+const { values, setField, reset } = usePersistedForm('form-key', initialValues);
 
-```ts
-const { loaded, error } = useImageLoader('/logo.png');
+// Example
+setField('username', 'john_doe'); // Auto-saves to storage
+reset(); // Clears storage
 ```
 
----
-
-  📌 **usePersistedState**  
-Stores and retrieves state from `localStorage` to persist data across page reloads.
-
-```ts
-const [theme, setTheme] = usePersistedState('theme', 'light');
-```
 
 ---
 
-  📌 **useReducedMotion**  
-Detects if the user has enabled the "Reduce Motion" accessibility setting in their system preferences.  
+  📌 **useEventListener**  
+Listens for a specified event on an element or window, and triggers the handler function when the event is fired. It ensures proper cleanup when the component is unmounted.
 
 ```ts
-const prefersReduced = useReducedMotion(); // ➝ true | false
+useEventListener('resize', (e) => {
+  console.log('Window resized');
+});
 ```
-
 ---
-
-  📌 **useCookie**  
-Manages cookies by providing functions to get, set, and delete a specific cookie by its key.
+📌 **useEventListeners**  
+ Simplifies adding/removing event listeners.
 
 ```ts
-const [token, setToken, deleteToken] = useCookie('token');
-
-setToken('abc123');
-deleteToken();
-```
-
----
-
-  📌 **useFetchRetry**  
-Performs an HTTP request with retry logic, retrying a specified number of times upon failure before returning an error.
+useEventListeners({
+  click: handleClick,
+  resize: handleResize
+});
 
-```ts
-const { data, loading, error } = useFetchRetry('/api/user', { method: 'GET' }, 3);
+// Example
+useEventListeners({
+  keydown: (e) => console.log(e.key)
+});
 ```
-
 ---
-
-  📌 **useDelay**  
-Delays the update of a value for a specified amount of time before reflecting it in the state.
+  📌 **useKeyPress**  
+Detects whether a specific key is being pressed or released.
 
 ```ts
-const delayedValue = useDelay(value, 500);
+const isEnterPressed = useKeyPress('Enter');
 ```
-
 ---
-
-  📌 **useVisibilityChange**  
-Tracks the visibility state of the document and returns whether the page is currently visible or hidden.
+📌 **useLongPress**  
+ Detects long press gestures.
 
 ```ts
-const isVisible = useVisibilityChange(); // ➝ true | false
-```
-
----
-
-  📌 **useDebouncedValue**  
- Debounces a value to avoid immediate changes, returning the delayed value after a specified delay.
+const handlers = useLongPress(() => console.log('Long pressed!'), {
+  threshold: 1000
+});
 
-```ts
-const debouncedSearch = useDebouncedValue(input, 300);
+// Example
+<button {...handlers}>Hold me</button>
 ```
-
 ---
-
-  📌 **useAsync**  
-Handles the state of an asynchronous function, including loading, success, and error states, with the ability to trigger the execution of the async operation.
+  📌 **useTouch**  
+Tracks touch events on a given DOM element, returning the touch positions for `touchstart`, `touchmove`, and `touchend`.
 
 ```ts
-const { execute, status, value, error } = useAsync(fetchUser);
+const ref = useRef(null);
+const {
+  touchStart,
+  touchMove,
+  touchEnd
+} = useTouch(ref);
 
-execute(); // ➝ runs the async function
+<div ref={ref}>Swipe here</div>
 ```
-
 ---
-
-  📌 **useScript**  
-Dynamically loads an external script, managing its loading, ready, and error states, and optionally removes the script on unmount.
+📌 **useIdle**  
+ Detects when user becomes inactive.
 
 ```ts
-const status = useScript('https://js.stripe.com/v3');
+const isIdle = useIdle(30000); // 30s timeout
 
-// status ➝ 'loading' | 'ready' | 'error'
+// Example
+{isIdle && <ScreenSaver />}
 ```
-
 ---
-
-  📌 **useIndexedDB**  
-Fetches data from an IndexedDB store, handling errors and updating the state with the fetched data.
+📌 **useDragReorder**  
+ Enables drag-and-drop reordering of lists.
 
 ```ts
-const { data, error } = useIndexedDB<MyType>('myDB', 'myStore');
-```
-
----
-
-  📌 **useGeoLocation**  
-Retrieves the user's current geographic location and returns it along with any error encountered.
+const { items, dragStart, dragOver, drop } = useDragReorder(initialItems);
 
-```ts
-const { position, error } = useGeoLocation();
+// Example
+<div 
+  draggable 
+  onDragStart={() => dragStart(index)}
+  onDragOver={() => dragOver(index)}
+  onDrop={drop}
+/>
 ```
 
 ---
 
-  📌 **useTimer**  
-Starts a countdown timer that updates the time every second, returning the current time and any errors.
+  📌 **useToggle**  
+A simple boolean toggle hook that returns a state and a function to toggle its value.
 
 ```ts
-const { time, error } = useTimer(60); // starts from 60 and counts down
+const [isOpen, toggle] = useToggle(false);
 ```
-
 ---
-
-  📌 **useIsMounted**  
-Tracks whether the component is mounted or unmounted, returning a boolean value indicating the component's mount status.
+  📌 **useArray**
+Provides an array state with helper functions to manipulate it, including setting, adding, removing by index, and clearing elements.
 
 ```ts
-const isMounted = useIsMounted();
-```
-
----
-
-  📌 **useCss**  
-Dynamically applies custom CSS to the document and removes it when the component unmounts, handling any errors during the process.
+const { array, set, push, removeByIndex, clear } = useArray([1, 2, 3]);
 
-```ts
-const { error } = useCss('body { background: #f5f5f5; }');
+push(4);            // ➝ [1, 2, 3, 4]
+removeByIndex(1);   // ➝ [1, 3, 4]
+clear();            // ➝ []
 ```
-
 ---
+  📌 **useStepper**  
+Manages step-based navigation by keeping track of the current step index and providing functions to move forward, backward, and reset.
 
-  📌 **useSpeak**  
-Converts text to speech using the Web Speech API, allowing the text to be spoken and handling errors.
 ```ts
-const { speak, error } = useSpeak('Hello world!');
-speak();
-```
-
----
-
-  📌 **useCountUp**  
- Animates a counter that counts up from 0 to a target value within a specified duration, returning the current count and any errors.
+const { activeStep, handleNext, handleBack, handleReset, isFirstStep, isLastStep } = useStepper(5);
 
-```ts
-const { count, error } = useCountUp(100, 5000); // counts up to 100 in 5s
+handleNext(); // ➝ advances step
+handleBack(); // ➝ goes back
+handleReset(); // ➝ step 0
 ```
 
 ---
-
-  📌 **useCountDown**  
-Counts down from a specified start value to zero, updating every second and returning the current count and any errors.
+📌 **useUndo**  
+ Provides undo/redo functionality for state changes.
 
 ```ts
-const { count, error } = useCountDown(10); // counts down from 10
-```
-
----
-
-  📌 **useBattery**  
- Monitors the battery status of the device, including level, charging status, and remaining charging or discharging time.
+const { state, setState, undo, redo } = useUndo(initialState);
 
-```ts
-const { level, charging, supported, loading, chargingTime, dischargingTime } = useBattery();
+// Example
+setState({ items: [...] });
+undo(); // Reverts to previous state
 ```
-
 ---
-
-  📌 **useEventListener**  
-Listens for a specified event on an element or window, and triggers the handler function when the event is fired. It ensures proper cleanup when the component is unmounted.
+  📌 **useAdvReducer**  
+A custom reducer function that takes an `initialState` and an object of actions, returning a new state based on the action type. 
 
 ```ts
-useEventListener('resize', (e) => {
-  console.log('Window resized');
+const reducer = useAdvReducer(initialState, {
+  increment: (state) => ({ count: state.count + 1 }),
 });
+const [state, dispatch] = useReducer(reducer, initialState);
 ```
-
----
-
-  📌 **useHistory**  
- Provides methods to navigate the browser history, including pushing and replacing history states, as well as moving back and forward in the history stack.
-
-```ts
-const {
-  history,
-  state,
-  push,
-  replace,
-  goBack,
-  goForward
-} = useHistory();
-
-push('/about', { from: 'home' });
-replace('/profile');
-goBack();
-goForward();
-```
-
----
-
-  📌 **usePreferredLanguage**  
-Retrieves the user's preferred language and languages from the browser, and checks if the browser supports the language APIs.
-
-```ts
-const {
-  language,
-  languages,
-  isSupported
-} = usePreferredLanguage();
-
-console.log(language); // e.g., "en-US"
-```
-
 ---
-
-  📌 **useSessionStorage**  
-Stores and retrieves data from the `sessionStorage` API, persisting the data during the session. It provides a getter and setter for session-based data.
+  📌 **useIsMounted**  
+Tracks whether the component is mounted or unmounted, returning a boolean value indicating the component's mount status.
 
 ```ts
-const [value, setValue] = useSessionStorage("myKey", "default");
-
-setValue("newValue");
-console.log(value);
+const isMounted = useIsMounted();
 ```
-
 ---
-
-  📌 **useSound**  
-Controls the playback of an audio file, including play, pause, and stop functionalities, while also managing the audio volume and handling any errors.
+📌 **useIsFirstRender**  
+ Returns true only on component's first render.
 
 ```ts
-const {
-  play,
-  pause,
-  stop,
-  setVolume,
-  isPlaying,
-  error
-} = useSound("/sound.mp3");
+const isFirst = useIsFirstRender();
 
-play();
-pause();
-stop();
-setVolume(0.5);
+// Example
+useEffect(() => {
+  if (!isFirst) console.log('Updated!');
+}, [deps]);
 ```
-
 ---
-
-  📌 **useTouch**  
-Tracks touch events on a given DOM element, returning the touch positions for `touchstart`, `touchmove`, and `touchend`.
+📌 **usePrevious**  
+Tracks the previous value of a state or prop.
 
 ```ts
-const ref = useRef(null);
-const {
-  touchStart,
-  touchMove,
-  touchEnd
-} = useTouch(ref);
-
-<div ref={ref}>Swipe here</div>
+const previousValue = usePrevious(currentValue);
 ```
-
 ---
-
   📌 **useUpdateEffect**  
 Executes a side effect on updates after the initial render, skipping the effect during the first render to avoid unnecessary executions.
 
 ```ts
 useUpdateEffect(() => {
-  console.log("This runs only on updates.");
-}, [value]);
-```
-
----
-
- 📌 **usePersistedForm**  
- Automatically persists form state to localStorage/sessionStorage and restores it on page reload.
-
-```ts
-const { values, setField, reset } = usePersistedForm('form-key', initialValues);
-
-// Example
-setField('username', 'john_doe'); // Auto-saves to storage
-reset(); // Clears storage
-```
-
----
-
-📌 **useCrossFieldValidation**  
- Handles complex validation rules that depend on multiple fields.
-
-```ts
-const { errors, validate } = useCrossFieldValidation({
-  rules: {
-    password: (val, { confirmPassword }) => val === confirmPassword,
-  },
-  initialValues
-});
-
-// Example
-validate('password', 'secret123', { confirmPassword: 'secret123' });
+  console.log("This runs only on updates.");
+}, [value]);
 ```
-
 ---
 
-📌 **useFieldArray**  
- Manages dynamic arrays of form fields with add/remove/reorder operations.
+📌 **useList**  
+ Manages array state with utility methods.
 
 ```ts
-const { fields, append, remove, move } = useFieldArray(initialItems);
+const { list, push, remove, update } = useList(initialItems);
 
 // Example
-append({ name: '', email: '' });
+push(newItem);
 remove(0); // Remove first item
-move(1, 0); // Move second item to first position
 ```
 
 ---
 
-📌 **useFormSubmit**  
- Handles form submission with loading/error states and success callbacks.
+  📌 **useLocalStorage**  
+ A hook to persist state in `localStorage`. It initializes state from `localStorage` and updates it whenever the value changes.
 
 ```ts
-const { submit, isLoading, error } = useFormSubmit(apiCall, {
-  onSuccess: (data) => console.log('Saved!', data)
-});
-
-// Example
-submit(formData);
+const [token, setToken] = useLocalStorage('authToken', '');
 ```
-
 ---
-
-📌 **useSmartForm**  
- Complete form management with validation, submission, and state handling.
+  📌 **useSessionStorage**  
+Stores and retrieves data from the `sessionStorage` API, persisting the data during the session. It provides a getter and setter for session-based data.
 
 ```ts
-const { register, handleSubmit, errors } = useSmartForm({
-  initialValues,
-  validationSchema,
-  onSubmit: (data) => console.log(data)
-});
+const [value, setValue] = useSessionStorage("myKey", "default");
 
-// Example
-<input {...register('email') />
-<button onClick={handleSubmit}>Save</button>
+setValue("newValue");
+console.log(value);
 ```
 
 ---
-
-📌 **useUndo**  
- Provides undo/redo functionality for state changes.
+  📌 **useCookie**  
+Manages cookies by providing functions to get, set, and delete a specific cookie by its key.
 
 ```ts
-const { state, setState, undo, redo } = useUndo(initialState);
+const [token, setToken, deleteToken] = useCookie('token');
 
-// Example
-setState({ items: [...] });
-undo(); // Reverts to previous state
+setToken('abc123');
+deleteToken();
 ```
-
 ---
+  📌 **usePersistedState**  
+Stores and retrieves state from `localStorage` to persist data across page reloads.
 
-📌 **useFormWizard**  
- Manages multi-step forms with navigation between steps.
+```ts
+const [theme, setTheme] = usePersistedState('theme', 'light');
+```
+---
+  📌 **useHistory**  
+ Provides methods to navigate the browser history, including pushing and replacing history states, as well as moving back and forward in the history stack.
 
 ```ts
-const { currentStep, next, prev, goto } = useFormWizard(steps.length);
+const {
+  history,
+  state,
+  push,
+  replace,
+  goBack,
+  goForward
+} = useHistory();
 
-// Example
-next(); // Move to next step
-goto(3); // Jump to step 4
+push('/about', { from: 'home' });
+replace('/profile');
+goBack();
+goForward();
 ```
 
 ---
-
-📌 **useWebSocket**  
- Manages WebSocket connections with auto-reconnect.
+📌 **useHistoryState**  
+ Manages state history with undo/redo capabilities.
 
 ```ts
-const { send, message, status } = useWebSocket('ws://api.example.com');
+const { state, setState, undo, redo } = useHistoryState(initialState);
 
 // Example
-send(JSON.stringify({ action: 'ping' }));
+setState({...});
+undo(); // Reverts change
 ```
-
 ---
+  📌 **useVisibilityChange**  
+Tracks the visibility state of the document and returns whether the page is currently visible or hidden.
 
-📌 **useDragReorder**  
- Enables drag-and-drop reordering of lists.
+```ts
+const isVisible = useVisibilityChange(); // ➝ true | false
+```
+---
+📌 **useDarkMode**  
+Detects and manages dark mode preferences in the browser.
 
 ```ts
-const { items, dragStart, dragOver, drop } = useDragReorder(initialItems);
+const [isDarkMode, toggleDarkMode] = useDarkMode();
+```
+---
+📌 **usePreferredLanguage**  
+Detects the preferred language set in the browser.
 
-// Example
-<div 
-  draggable 
-  onDragStart={() => dragStart(index)}
-  onDragOver={() => dragOver(index)}
-  onDrop={drop}
-/>
+```ts
+const language = usePreferredLanguage();
 ```
+---
+📌 **useIndexedDB**  
+Provides a hook to interact with IndexedDB in the browser, enabling persistent client-side storage.
 
+```ts
+const { data, setData } = useIndexedDB('dbName');
+```
 ---
 
-📌 **useInfiniteScroll**  
- Implements infinite scroll pagination.
+📌 **useMediaQuery**  
+Checks if a media query condition matches the current viewport, useful for responsive design.
 
 ```ts
-const { items, loadMore, isLoading } = useInfiniteScroll(fetchCallback);
-
-// Example
-<div onScroll={loadMore}>...</div>
+const isMobile = useMediaQuery('(max-width: 768px)');
 ```
-
 ---
+📌 **useWindowSize**  
+Returns the current window size (width and height).
 
-📌 **useEventListeners**  
- Simplifies adding/removing event listeners.
+```ts
+const { width, height } = useWindowSize();
+```
+---
+  📌 **useResizeObserver**  
+Observes and returns the dimensions of an HTML element using the `ResizeObserver` API.
 
 ```ts
-useEventListeners({
-  click: handleClick,
-  resize: handleResize
-});
+const size = useResizeObserver(ref);
 
-// Example
-useEventListeners({
-  keydown: (e) => console.log(e.key)
-});
+// size = { width: 200, height: 100 }
 ```
-
 ---
+  📌 **useScrollPosition**  
+Tracks the horizontal (x) and vertical (y) scroll positions of the window.
 
-📌 **useHistoryState**  
- Manages state history with undo/redo capabilities.
+```ts
+const { x, y } = useScrollPosition();
+```
+---
+  📌 **useScrollDirection**  
+Determines whether the user is scrolling up or down based on window scroll position changes.
 
 ```ts
-const { state, setState, undo, redo } = useHistoryState(initialState);
+const direction = useScrollDirection(); // ➝ 'up' | 'down'
+```
 
-// Example
-setState({...});
-undo(); // Reverts change
+📌 **useScrollLock**  
+Locks or unlocks scrolling on the page.
+
+```ts
+useScrollLock(true); // Lock scrolling
+useScrollLock(false); // Unlock scrolling
 ```
+---
+📌 **useLockBodyScroll**  
+Prevents scrolling on the body element, useful for modals or off-canvas menus.
 
+```ts
+useLockBodyScroll(true);
+```
 ---
+📌 **useCss**  
+Allows injecting dynamic CSS rules into the document.
 
-📌 **useIdle**  
- Detects when user becomes inactive.
+```ts
+useCss('.class { color: red; }');
+```
+---
+📌 **useReducedMotion**  
+Detects whether the user has reduced motion settings in their OS preferences.
 
 ```ts
-const isIdle = useIdle(30000); // 30s timeout
+const prefersReducedMotion = useReducedMotion();
+```
+---
+📌 **useImageLoader**  
+Provides a way to load and display images in a way that improves performance and loading behavior.
 
-// Example
-{isIdle && <ScreenSaver />}
+```ts
+const { isLoading, image } = useImageLoader('imageURL');
 ```
 
 ---
 
-📌 **useIsFirstRender**  
- Returns true only on component's first render.
+  📌 **useBattery**  
+ Monitors the battery status of the device, including level, charging status, and remaining charging or discharging time.
 
 ```ts
-const isFirst = useIsFirstRender();
-
-// Example
-useEffect(() => {
-  if (!isFirst) console.log('Updated!');
-}, [deps]);
+const { level, charging, supported, loading, chargingTime, dischargingTime } = useBattery();
 ```
-
 ---
+  📌 **useGeoLocation**  
+Retrieves the user's current geographic location and returns it along with any error encountered.
 
-📌 **useList**  
- Manages array state with utility methods.
+```ts
+const { position, error } = useGeoLocation();
+```
+---
+  📌 **useMousePosition**  
+Tracks the user's mouse position in real-time and returns the coordinates. 
 
 ```ts
-const { list, push, remove, update } = useList(initialItems);
+const { x, y } = useMousePosition();
+```
 
-// Example
-push(newItem);
-remove(0); // Remove first item
+---
+  📌 **useOnlineStatus**  
+Monitors the user's network connection status (online/offline).
+
+```ts
+const isOnline = useOnlineStatus();
 ```
 
 ---
 
-📌 **useLockBodyScroll**  
- Locks scrolling on the document body.
+  📌 **useSound**  
+Controls the playback of an audio file, including play, pause, and stop functionalities, while also managing the audio volume and handling any errors.
 
 ```ts
-useLockBodyScroll(true); // Enable lock
+const {
+  play,
+  pause,
+  stop,
+  setVolume,
+  isPlaying,
+  error
+} = useSound("/sound.mp3");
 
-// Example
-useLockBodyScroll(modalIsOpen);
+play();
+pause();
+stop();
+setVolume(0.5);
 ```
-
 ---
-
-📌 **useLongPress**  
- Detects long press gestures.
+  📌 **useSpeak**  
+Converts text to speech using the Web Speech API, allowing the text to be spoken and handling errors.
+```ts
+const { speak, error } = useSpeak('Hello world!');
+speak();
+```
+---
+  📌 **useCountUp**  
+ Animates a counter that counts up from 0 to a target value within a specified duration, returning the current count and any errors.
 
 ```ts
-const handlers = useLongPress(() => console.log('Long pressed!'), {
-  threshold: 1000
-});
+const { count, error } = useCountUp(100, 5000); // counts up to 100 in 5s
+```
 
-// Example
-<button {...handlers}>Hold me</button>
+---
+  📌 **useCountDown**  
+Counts down from a specified start value to zero, updating every second and returning the current count and any errors.
+
+```ts
+const { count, error } = useCountDown(10); // counts down from 10
 ```
 
 ---
 
-📌 **createOptimizedContext**  
- Creates optimized React context with selector support.
+📌 **useWebSocket**  
+ Manages WebSocket connections with auto-reconnect.
 
 ```ts
-const { Provider, useStore } = createOptimizedContext(initialState);
+const { send, message, status } = useWebSocket('ws://api.example.com');
 
 // Example
-const user = useStore(state => state.user);
+send(JSON.stringify({ action: 'ping' }));
 ```
-
 ---
 
------------------------------------------------- **Custom Components** --------------------------------------------
+Let me know if you'd like more information or changes!
+
+------------------------------------- **Custom Components** --------------------------------------------
 
   ✅ **DynamicLoader**  
 A Higher-Order Component (HOC) that dynamically loads a React component using `React.lazy()` with `Suspense`, while wrapping it in an `ErrorBoundary` to handle potential errors gracefully. It ensures that the component is loaded only when needed, reducing the initial bundle size and improving performance.
@@ -950,6 +768,18 @@ A functional React component that displays dynamic alerts using the enqueueSnack
 ```jsx
 <AlertMessage type="success" msg="Data saved successfully!" />
 ```
+---
+  ✅ **FieldSkeleton**  
+Simulates form field placeholders with optional label skeletons, useful for loading states in forms or input sections.
+
+```jsx
+<FieldSkeleton 
+  length={3} 
+  spacing={2} 
+  isLabel={true} 
+  responsive={{ xs: 12, sm: 6, md: 4 }} 
+/>
+```
 ---
 
  ✅ **FileSkeleton**  
@@ -1006,4 +836,4 @@ Displays a skeleton placeholder for a pie chart inside a card layout. Includes a
 
   **License** 
 
-[MIT](https://opensource.org/licenses)
+[MIT](https://docs.npmjs.com/policies/npm-license) © (2022-2024)

package/dist/hooks/chunk613852.js

@@ -126,7 +126,7 @@ export var FilePreview = function (_a) {
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 maxWidth: width - 120,
-                            }, children: filename })), _jsx(Typography, { variant: "caption", color: "text.secondary", children: size })] }), _jsx(IconButton, { disabled: onDownload === undefined, "aria-label": "download", onClick: function () { return onDownload(primaryKey); }, sx: { color: '#dfdfdf', '&:hover': { color: 'primary.main' } }, children: isDownloading ? (_jsx(CircularProgress, { color: "success", size: 20 })) : (_jsx(Download, { fontSize: "small", color: "primary" })) })] }) }));
+                            }, children: filename })), _jsx(Typography, { variant: "caption", color: "text.secondary", children: size })] }), _jsx(IconButton, { disabled: onDownload === undefined, "aria-label": "download", onClick: function () { return onDownload(primaryKey); }, sx: { color: '#dfdfdf', '&:hover': { color: 'primary.main' } }, children: isDownloading ? (_jsx(CircularProgress, { color: "success", size: 20 })) : (_jsx(Download, { fontSize: "small", color: onDownload ? 'primary' : 'inherit' })) })] }) }));
 };
 var VisuallyHiddenInput = forwardRef(function (props, ref) { return (_jsx("input", __assign({ ref: ref, type: "file", style: {
         position: 'absolute',

package/dist/hooks/chunk940514.d.ts

@@ -69,6 +69,19 @@ export declare const useStepper: (totalSteps: number) => {
     isLastStep: boolean;
     isProccesing: boolean;
     setIsProccesing: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    goto: (step: number) => void;
+};
+export declare const useSteps: (totalSteps: number) => {
+    activeStep: number;
+    handleNext: () => void;
+    handleBack: () => void;
+    handleReset: () => void;
+    goto: (step: number) => void;
+    totalSteps: number;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    isProcessing: boolean;
+    setIsProcessing: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
 export declare function useTimeoutFn(callback: () => void, delay: number | null): {
     reset: () => void;

package/dist/hooks/chunk940514.js

@@ -431,6 +431,14 @@ export var useStepper = function (totalSteps) {
     var handleReset = function () {
         setActiveStep(0);
     };
+    var goto = function (step) {
+        if (step >= 0 && step < totalSteps) {
+            setActiveStep(step);
+        }
+        else {
+            console.warn("Step ".concat(step, " is out of bounds (0-").concat(totalSteps - 1, ")"));
+        }
+    };
     return {
         activeStep: activeStep,
         handleNext: handleNext,
@@ -441,6 +449,44 @@ export var useStepper = function (totalSteps) {
         isLastStep: activeStep === totalSteps - 1,
         isProccesing: isProccesing,
         setIsProccesing: setIsProccesing,
+        goto: goto
+    };
+};
+export var useSteps = function (totalSteps) {
+    var _a = useState(0), activeStep = _a[0], setActiveStep = _a[1];
+    var _b = useState(false), isProcessing = _b[0], setIsProcessing = _b[1];
+    var handleNext = function () {
+        if (activeStep < totalSteps - 1) {
+            setActiveStep(function (prev) { return prev + 1; });
+        }
+    };
+    var handleBack = function () {
+        if (activeStep > 0) {
+            setActiveStep(function (prev) { return prev - 1; });
+        }
+    };
+    var handleReset = function () {
+        setActiveStep(0);
+    };
+    var goto = function (step) {
+        if (step >= 0 && step < totalSteps) {
+            setActiveStep(step);
+        }
+        else {
+            console.warn("Step ".concat(step, " is out of bounds (0-").concat(totalSteps - 1, ")"));
+        }
+    };
+    return {
+        activeStep: activeStep,
+        handleNext: handleNext,
+        handleBack: handleBack,
+        handleReset: handleReset,
+        goto: goto,
+        totalSteps: totalSteps,
+        isFirstStep: activeStep === 0,
+        isLastStep: activeStep === totalSteps - 1,
+        isProcessing: isProcessing,
+        setIsProcessing: setIsProcessing,
     };
 };
 export function useTimeoutFn(callback, delay) {

package/dist/skeletons/chunk613555.d.ts

@@ -10,10 +10,14 @@ export declare const TableSkeleton: ({ rows, columns }: {
 export declare const LineChartSkeleton: () => import("react/jsx-runtime").JSX.Element;
 export declare const CardSkeleton: () => import("react/jsx-runtime").JSX.Element;
 export declare const PieChartSkeleton: React.FC;
-export declare const FieldSkeleton: ({ length, width, spacing, isLabel, itemsPerRow, }: {
+export declare const FieldSkeleton: ({ length, width, spacing, isLabel, responsive, }: {
     length?: number | undefined;
     width?: string | undefined;
     spacing?: number | undefined;
     isLabel?: boolean | undefined;
-    itemsPerRow?: number | undefined;
+    responsive?: {
+        xs: number;
+        sm: number;
+        md: number;
+    } | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/skeletons/chunk613555.js

@@ -1,3 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Card, CardContent, CardHeader, Grid, IconButton, Skeleton, Table, TableBody, TableCell, TableHead, TableRow, Toolbar, Tooltip, } from "@mui/material";
 import { Download } from "@mui/icons-material";
@@ -88,7 +100,7 @@ export var PieChartSkeleton = function () {
                             }, children: _jsx(Skeleton, { variant: "circular", width: 200, height: 200, sx: { marginBottom: '16px' } }) })] }) })] }));
 };
 export var FieldSkeleton = function (_a) {
-    var _b = _a.length, length = _b === void 0 ? 1 : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c, _d = _a.spacing, spacing = _d === void 0 ? 2 : _d, _e = _a.isLabel, isLabel = _e === void 0 ? false : _e, _f = _a.itemsPerRow, itemsPerRow = _f === void 0 ? 2 : _f;
-    var columnSize = Math.floor(12 / itemsPerRow);
-    return (_jsx(Grid, { container: true, spacing: spacing, children: Array.from({ length: length }).map(function (_, index) { return (_jsx(Grid, { item: true, xs: 12, sm: columnSize, children: _jsxs(Box, { sx: { width: '100%', margin: 2 }, children: [isLabel && _jsx(Skeleton, { variant: "text", width: "40%", height: 20, sx: { marginBottom: 1 } }), _jsx(Skeleton, { variant: "rectangular", width: width, height: 40, sx: { borderRadius: 1 } })] }) }, index.toString())); }) }));
+    var _b = _a.length, length = _b === void 0 ? 1 : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c, _d = _a.spacing, spacing = _d === void 0 ? 2 : _d, _e = _a.isLabel, isLabel = _e === void 0 ? false : _e, _f = _a.responsive, responsive = _f === void 0 ? { xs: 12, sm: 6, md: 4 } : _f;
+    return (_jsx(Grid, { container: true, spacing: spacing, children: Array.from({ length: length }).map(function (_, index) { return (_createElement(Grid, __assign({ item: true }, responsive, { key: index.toString() }),
+            _jsxs(Box, { sx: { width: '100%', margin: 2 }, children: [isLabel && _jsx(Skeleton, { variant: "text", width: "40%", height: 20, sx: { marginBottom: 1 } }), _jsx(Skeleton, { variant: "rectangular", width: width, height: 40, sx: { borderRadius: 1 } })] }))); }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-toolkit",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Ultimate package for React developers, offering a powerful collection of hooks and components to enhance their development experience.",
   "main": "dist/index.js",
   "module": "dist/index.js",