react-hook-toolkit 1.0.1 → 1.0.4

package/README.md

@@ -1,125 +1,581 @@
+
 **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.
 
 ## Installation
 
-Install the package with npm:
+Install the package:
 
 ```bash
-  npm i react-hook-toolkit
+npm install react-hook-toolkit
+# or
+yarn add react-hook-toolkit
+# or
+pnpm add react-hook-toolkit
 ```
 
 ## Features  
+Here's the properly structured documentation with clear purpose explanations:
+
+###  **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.
+```ts
+const { data, loading, error, makeRequest, cancelRequest } = useAxios({ baseURL: '/api' });
+
+useEffect(() => {
+  makeRequest('/users', 'GET');
+}, []);
+```
+
+---
+
+### 📌 **useAdvReducer**  
+A custom reducer function that takes an `initialState` and an object of actions, returning a new state based on the action type. 
+
+```ts
+const reducer = useAdvReducer(initialState, {
+  increment: (state) => ({ count: state.count + 1 }),
+});
+const [state, dispatch] = useReducer(reducer, initialState);
+```
+
+---
+
+### 📌 **useFetch**  
+Fetches data from a given URL and manages the loading, error, and data states.
+
+```ts
+const { data, loading, error } = useFetch<User[]>('/api/users');
+```
+
+---
+
+### 📌 **useLocalStorage**  
+ A hook to persist state in `localStorage`. It initializes state from `localStorage` and updates it whenever the value changes.
+
+```ts
+const [token, setToken] = useLocalStorage('authToken', '');
+```
+
+---
+
+### 📌 **useToggle**  
+A simple boolean toggle hook that returns a state and a function to toggle its value.
+
+```ts
+const [isOpen, toggle] = useToggle(false);
+```
+
+---
 
-- **`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.  
+### 📌 **useDebounce**  
+Delays updating the state until after a specified delay, useful for preventing frequent updates (e.g., handling user input).
 
-- **`useAdvReducer`**: A custom reducer function that takes an `initialState` and an object of actions, returning a new state based on the action type.  
+```ts
+const debouncedSearch = useDebounce(searchText, 500);
+```
 
-- **`useFetch`**: Fetches data from a given URL and manages the loading, error, and data states.  
+---
 
-- **`useLocalStorage`**: A hook to persist state in `localStorage`. It initializes state from `localStorage` and updates it whenever the value changes.  
+### 📌 **useThrottle**  
+Limits how often a value updates within a given time interval, useful for performance optimization.
 
-- **`useToggle`**: A simple boolean toggle hook that returns a state and a function to toggle its value.  
+```ts
+const throttledScroll = useThrottle(scrollValue, 300);
+```
 
-- **`useDebounce`**: Delays updating the state until after a specified delay, useful for preventing frequent updates (e.g., handling user input).  
+---
 
-- **`useThrottle`**: Limits how often a value updates within a given time interval, useful for performance optimization.  
+### 📌 **usePrevious**  
+Returns the previous value of a state or prop.
 
-- **`usePrevious`**: Keeps track of the previous value of a state or prop.  
+```ts
+const prevValue = usePrevious(currentValue);
+```
 
-- **`useMediaQuery`**: Checks if a media query matches the current viewport size and updates the state accordingly.  
+---
 
-- **`useClipboard`**: Copies text to the clipboard and provides a state to indicate if copying was successful.  
+### 📌 **useMediaQuery**  
+Checks if a media query matches the current viewport size and updates the state accordingly.
 
-- **`useInterval`**: Runs a callback function at a specified time interval and clears it when the delay is null or the component unmounts.  
+```ts
+const isMobile = useMediaQuery('(max-width: 768px)');
+```
 
-- **`useWindowSize`**: Tracks the width and height of the browser window and updates when resized.  
+---
 
-- **`useKeyPress`**: Detects whether a specific key is being pressed or released.  
+### 📌 **useClipboard**  
+Copies text to the clipboard and provides a state to indicate if copying was successful.
 
-- **`useOnlineStatus`**: Monitors the user's network connection status (online/offline).  
+```ts
+const [copied, copyToClipboard] = useClipboard();
+copyToClipboard('Text to copy');
+```
 
-- **`useScrollPosition`**: Tracks the horizontal (x) and vertical (y) scroll positions of the window.  
+---
 
-- **`useTimeout`**: Executes a function after a specified delay and cleans up automatically when dependencies change.  
+### 📌 **useInterval**  
+Runs a callback function at a specified time interval and clears it when the delay is null or the component unmounts.
 
-- **`useDarkMode`**: Detects and toggles dark mode based on the user's system preference.  
+```ts
+useInterval(() => {
+  console.log('Tick');
+}, 1000);
+```
 
-- **`useForm`**: Manages form state, handles input changes, and performs validation using provided validators.  
+---
 
-- **`useArray<T>`**: Provides an array state with helper functions to manipulate it, including setting, adding, removing by index, and clearing elements.
+### 📌 **useWindowSize**  
+Tracks the width and height of the browser window and updates when resized. 
 
-- **`useStepper`**: Manages step-based navigation by keeping track of the current step index and providing functions to move forward, backward, and reset.
+```ts
+const { width, height } = useWindowSize();
+```
 
-- **`useTimeoutFn`**: Executes a callback function after a specified delay and provides functions to reset or clear the timeout.  
+---
 
-- **`useDebouncedCallback`**: Delays the execution of a callback function until after a specified delay, resetting the delay on each call to prevent frequent execution. 
+### 📌 **useKeyPress**  
+Detects whether a specific key is being pressed or released.
 
-- **`useScrollLock`**: Locks or unlocks scrolling on the webpage when the `lock` parameter changes.  
+```ts
+const isEnterPressed = useKeyPress('Enter');
+```
 
-- **`useResizeObserver<T>`**: Observes and returns the dimensions of an HTML element using the `ResizeObserver` API.  
+---
 
-- **`useMousePosition`**: Tracks the user's mouse position in real-time and returns the coordinates.  
+### 📌 **useOnlineStatus**  
+Monitors the user's network connection status (online/offline).
 
-- **`useScrollDirection`**: Determines whether the user is scrolling up or down based on window scroll position changes.  
+```ts
+const isOnline = useOnlineStatus();
+```
 
-- **`useImageLoader`**: Loads an image and provides `loaded` and `error` states to track its loading status.  
+---
 
-- **`usePersistedState<T>`**: Stores and retrieves state from `localStorage` to persist data across page reloads.  
+### 📌 **useScrollPosition**  
+Tracks the horizontal (x) and vertical (y) scroll positions of the window.
 
-- **`useReducedMotion`**: Detects if the user has enabled the "Reduce Motion" accessibility setting in their system preferences.  
+```ts
+const { x, y } = useScrollPosition();
+```
 
-- **`useCookie`**: Manages cookies by providing functions to get, set, and delete a specific cookie by its key.
+---
 
-- **`useFetchRetry`**: Performs an HTTP request with retry logic, retrying a specified number of times upon failure before returning an error.
+### 📌 **useTimeout**  
+Executes a function after a specified delay and cleans up automatically when dependencies change.
 
-- **`useDelay`**: Delays the update of a value for a specified amount of time before reflecting it in the state.
+```ts
+useTimeout(() => {
+  console.log('Time\'s up!');
+}, 2000);
+```
 
-- **`useVisibilityChange`**: Tracks the visibility state of the document and returns whether the page is currently visible or hidden.
+---
 
-- **`useDebouncedValue`**: Debounces a value to avoid immediate changes, returning the delayed value after a specified delay.
+### 📌 **useDarkMode**  
+Detects and toggles dark mode based on the user's system preference.
 
-- **`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 [isDarkMode, toggleDarkMode] = useDarkMode();
+```
+
+---
+
+### 📌 **useForm**  
+Manages form state, handles input changes, and performs validation using provided validators.
+
+```ts
+const { values, errors, handleChange, validate } = useForm({ name: '', email: '' });
+
+handleChange('name', 'John');
 
-- **`useScript`**: Dynamically loads an external script, managing its loading, ready, and error states, and optionally removes the script on unmount.
+validate({
+  name: (val) => (!val ? 'Required' : null),
+  email: (val) => (!val.includes('@') ? 'Invalid email' : null),
+});
+```
 
-- **`useReducedMotion`**: Detects if the user has enabled the "Reduce Motion" accessibility setting and returns a boolean indicating whether reduced motion is preferred.
+---
 
-- **`useIndexedDB`**: Fetches data from an IndexedDB store, handling errors and updating the state with the fetched data.
+### 📌 **useArray**
+Provides an array state with helper functions to manipulate it, including setting, adding, removing by index, and clearing elements.
 
-- **`useGeoLocation`**: Retrieves the user's current geographic location and returns it along with any error encountered.
+```ts
+const { array, set, push, removeByIndex, clear } = useArray([1, 2, 3]);
 
-- **`useTimer`**: Starts a countdown timer that updates the time every second, returning the current time and any errors.
+push(4);            // ➝ [1, 2, 3, 4]
+removeByIndex(1);   // ➝ [1, 3, 4]
+clear();            // ➝ []
+```
 
-- **`useIsMounted`**: Tracks whether the component is mounted or unmounted, returning a boolean value indicating the component's mount status.
+---
 
-- **`useCss`**: Dynamically applies custom CSS to the document and removes it when the component unmounts, handling any errors during the process.
+### 📌 **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 { activeStep, handleNext, handleBack, handleReset, isFirstStep, isLastStep } = useStepper(5);
 
-- **`useCountUp`**: Animates a counter that counts up from 0 to a target value within a specified duration, returning the current count and any errors.
+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.
+---
 
-- **`useBattery`**: Monitors the battery status of the device, including level, charging status, and remaining charging or discharging time.
+### 📌 **useTimeoutFn**  
+Executes a callback function after a specified delay and provides functions to reset or clear the timeout.  
 
-- **`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 { reset, clear } = useTimeoutFn(() => doSomething(), 1000);
 
-- **`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.
+reset(); // ➝ restarts timeout
+clear(); // ➝ clears timeout
+```
 
-- **`usePreferredLanguage`**: Retrieves the user's preferred language and languages from the browser, and checks if the browser supports the language APIs.
+---
 
-- **`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.
+### 📌 **useDebouncedCallback**  
+Delays the execution of a callback function until after a specified delay, resetting the delay on each call to prevent frequent execution.
 
-- **`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
+const debounced = useDebouncedCallback(() => search(input), 300);
 
-- **`useTouch`**: Tracks touch events on a given DOM element, returning the touch positions for `touchstart`, `touchmove`, and `touchend`.
+input.onChange = debounced;
+```
 
-- **`useUpdateEffect`**: Executes a side effect on updates after the initial render, skipping the effect during the first render to avoid unnecessary executions.
+---
+
+### 📌 **useScrollLock**  
+Locks or unlocks scrolling on the webpage when the `lock` parameter changes.
+
+```ts
+useScrollLock(true); // ➝ disables body scroll
+```
+
+---
+
+### 📌 **useResizeObserver**  
+Observes and returns the dimensions of an HTML element using the `ResizeObserver` API.
+
+```ts
+const size = useResizeObserver(ref);
+
+// size = { width: 200, height: 100 }
+```
+
+---
+
+### 📌 **useMousePosition**  
+Tracks the user's mouse position in real-time and returns the coordinates. 
+
+```ts
+const { x, y } = useMousePosition();
+```
+
+---
+
+### 📌 **useScrollDirection**  
+Determines whether the user is scrolling up or down based on window scroll position changes.
+
+```ts
+const direction = useScrollDirection(); // ➝ 'up' | 'down'
+```
+
+---
+
+### 📌 **useImageLoader**  
+Loads an image and provides `loaded` and `error` states to track its loading status.
+
+```ts
+const { loaded, error } = useImageLoader('/logo.png');
+```
+
+---
+
+### 📌 **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.  
+
+```ts
+const prefersReduced = useReducedMotion(); // ➝ true | false
+```
+
+---
+
+### 📌 **useCookie**  
+Manages cookies by providing functions to get, set, and delete a specific cookie by its key.
+
+```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.
+
+```ts
+const { data, loading, error } = useFetchRetry('/api/user', { method: 'GET' }, 3);
+```
+
+---
+
+### 📌 **useDelay**  
+Delays the update of a value for a specified amount of time before reflecting it in the state.
+
+```ts
+const delayedValue = useDelay(value, 500);
+```
 
-## Authors
+---
 
-- **Shivaji** : (Sr. React Developer)
-- **Shyamal** : (Sr. React Developer)
+### 📌 **useVisibilityChange**  
+Tracks the visibility state of the document and returns whether the page is currently visible or hidden.
+
+```ts
+const isVisible = useVisibilityChange(); // ➝ true | false
+```
+
+---
+
+### 📌 **useDebouncedValue**  
+ Debounces a value to avoid immediate changes, returning the delayed value after a specified delay.
+
+```ts
+const debouncedSearch = useDebouncedValue(input, 300);
+```
+
+---
+
+### 📌 **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 { execute, status, value, error } = useAsync(fetchUser);
+
+execute(); // ➝ runs the async function
+```
+
+---
+
+### 📌 **useScript**  
+Dynamically loads an external script, managing its loading, ready, and error states, and optionally removes the script on unmount.
+
+```ts
+const status = useScript('https://js.stripe.com/v3');
+
+// status ➝ 'loading' | 'ready' | 'error'
+```
+
+---
+
+### 📌 **useIndexedDB**  
+Fetches data from an IndexedDB store, handling errors and updating the state with the fetched data.
+
+```ts
+const { data, error } = useIndexedDB<MyType>('myDB', 'myStore');
+```
+
+---
+
+### 📌 **useGeoLocation**  
+Retrieves the user's current geographic location and returns it along with any error encountered.
+
+```ts
+const { position, error } = useGeoLocation();
+```
+
+---
+
+### 📌 **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
+```
+
+---
+
+### 📌 **useIsMounted**  
+Tracks whether the component is mounted or unmounted, returning a boolean value indicating the component's mount status.
+
+```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.
+
+```ts
+const { error } = useCss('body { background: #f5f5f5; }');
+```
+
+---
+
+### 📌 **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 { count, error } = useCountUp(100, 5000); // counts up to 100 in 5s
+```
+
+---
+
+### 📌 **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
+```
+
+---
+
+### 📌 **useBattery**  
+ Monitors the battery status of the device, including level, charging status, and remaining charging or discharging time.
+
+```ts
+const { level, charging, supported, loading, chargingTime, dischargingTime } = useBattery();
+```
+
+---
+
+### 📌 **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
+useEventListener('resize', (e) => {
+  console.log('Window resized');
+});
+```
+
+---
+
+### 📌 **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.
+
+```ts
+const [value, setValue] = useSessionStorage("myKey", "default");
+
+setValue("newValue");
+console.log(value);
+```
+
+---
+
+### 📌 **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
+const {
+  play,
+  pause,
+  stop,
+  setVolume,
+  isPlaying,
+  error
+} = useSound("/sound.mp3");
+
+play();
+pause();
+stop();
+setVolume(0.5);
+```
+
+---
+
+### 📌 **useTouch**  
+Tracks touch events on a given DOM element, returning the touch positions for `touchstart`, `touchmove`, and `touchend`.
+
+```ts
+const ref = useRef(null);
+const {
+  touchStart,
+  touchMove,
+  touchEnd
+} = useTouch(ref);
+
+<div ref={ref}>Swipe here</div>
+```
+
+---
+
+### 📌 **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]);
+```
+
+###  **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.
+
+```ts
+import React, { lazy } from "react";
+const MyComponent = DynamicLoader(lazy(() => import("./MyComponent")));
+
+```
 
 ## License
 

package/dist/hookExecuter/hookExecuter.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license HEXE
+ * Copyright (c) 2020-2024 Shivaji & Collaborators
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+type HookFunction = () => any;
+declare class HEXE {
+    private hs;
+    private ss;
+    constructor();
+    setHook(name: string, hookFunction: HookFunction): this;
+    private putHooks;
+    component(): React.FC;
+    getHook(name: string): any;
+}
+declare const ReactHooksWrapper: React.FC<{}>;
+declare const getHook: (name: string) => any, setHook: (name: string, hookFunction: HookFunction) => HEXE;
+export { ReactHooksWrapper, getHook, setHook };

package/dist/hookExecuter/hookExecuter.js

@@ -0,0 +1,58 @@
+/**
+ * @license HEXE
+ * Copyright (c) 2020-2024 Shivaji & Collaborators
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+var HEXE = /** @class */ (function () {
+    function HEXE() {
+        this.hs = {};
+        this.ss = {};
+        this.setHook = this.setHook.bind(this);
+        this.getHook = this.getHook.bind(this);
+        this.putHooks = this.putHooks.bind(this);
+    }
+    HEXE.prototype.setHook = function (name, hookFunction) {
+        [
+            { value: name, id: 'name', type: 'string' },
+            { value: hookFunction, id: 'hook', type: 'function' },
+        ].forEach(function (_a) {
+            var value = _a.value, id = _a.id, type = _a.type;
+            if (type === 'string' && typeof value !== 'string') {
+                throw new TypeError("\"".concat(id, "\" expected to be of type ").concat(type));
+            }
+            if (type === 'function' && typeof value !== 'function') {
+                throw new TypeError("\"".concat(id, "\" expected to be of type ").concat(type));
+            }
+        });
+        this.hs[name] = {
+            name: name,
+            hook: hookFunction,
+        };
+        return this;
+    };
+    HEXE.prototype.putHooks = function (name, value) {
+        this.ss[name] = value;
+    };
+    HEXE.prototype.component = function () {
+        var _this = this;
+        /* Author: Shivaji & Shyamal */
+        var Component = function () {
+            Object.values(_this.hs).forEach(function (_a) {
+                var name = _a.name, hook = _a.hook;
+                _this.putHooks(name, hook());
+            });
+            return /*#__PURE__*/ React.createElement(React.Fragment, null);
+        };
+        return Component;
+    };
+    HEXE.prototype.getHook = function (name) {
+        return this.ss[name];
+    };
+    return HEXE;
+}());
+var o = new HEXE();
+var ReactHooksWrapper = o.component();
+var getHook = o.getHook, setHook = o.setHook;
+export { ReactHooksWrapper, getHook, setHook };

package/dist/hooks/hooksComp.d.ts

@@ -1,39 +1,9 @@
-import { RefObject } from 'react';
-export declare function useHover<T extends HTMLElement>(): [RefObject<T>, boolean];
-export declare function useOnClickOutside<T extends HTMLElement>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void): void;
-interface IntersectionObserverArgs {
-    root?: Element | null;
-    rootMargin?: string;
-    threshold?: number | number[];
-}
-export declare function useIntersectionObserver<T extends HTMLElement>(ref: RefObject<T>, { root, rootMargin, threshold }?: IntersectionObserverArgs): boolean;
-export declare function useHoverIntent<T extends HTMLElement>(): [RefObject<T>, boolean];
-export interface DragDropState {
-    isDragging: boolean;
-    isOver: boolean;
-    draggedItemId: string | null;
-    overDropId: string | null;
-}
-export declare const useDragDrop: (onDrop: (dragId: string, dropId: string) => void) => {
-    state: DragDropState;
-    bindDrag: (dragId: string) => {
-        draggable: boolean;
-        onDragStart: (e: React.DragEvent) => void;
-    };
-    bindDrop: (dropId: string) => {
-        onDragOver: (e: React.DragEvent) => void;
-        onDragEnter: (e: React.DragEvent) => void;
-        onDragLeave: (e: React.DragEvent) => void;
-        onDrop: (e: React.DragEvent) => void;
-    };
-};
-export declare function useFocusTrap(ref: React.RefObject<HTMLElement>): void;
-export declare function useFocus<T extends HTMLElement>(): [React.RefObject<T>, boolean];
-interface WindowSize {
-    width: number;
-    height: number;
-}
-export declare function useElementSize<T extends HTMLElement = HTMLDivElement>(): [(node: T | null) => void, WindowSize];
-export declare function useLockBodyScroll(lock?: boolean): void;
+import { FC } from 'react';
 export declare const DynamicLoader: (Component: any) => (props: any) => import("react/jsx-runtime").JSX.Element;
-export {};
+interface PropsType {
+    type: string;
+    msg: string;
+    duration?: number;
+}
+declare const AlertMessage: FC<PropsType>;
+export default AlertMessage;

package/dist/hooks/hooksComp.js

@@ -10,211 +10,13 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useRef, useLayoutEffect, Suspense } from 'react';
-import { Box, Alert, AlertTitle } from '@mui/material';
+import { useEffect, useCallback, useRef, Suspense } from 'react';
+import { Box, Alert, AlertTitle, IconButton } from '@mui/material';
+import { Close } from '@mui/icons-material';
 import NProgress from 'nprogress';
 import { ErrorBoundary } from 'react-error-boundary';
 import { promise } from '../utils';
-export function useHover() {
-    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
-    var ref = useRef(null);
-    useEffect(function () {
-        var node = ref.current;
-        if (!node)
-            return;
-        var handleMouseOver = function () { return setIsHovered(true); };
-        var handleMouseOut = function () { return setIsHovered(false); };
-        node.addEventListener('mouseover', handleMouseOver);
-        node.addEventListener('mouseout', handleMouseOut);
-        return function () {
-            node.removeEventListener('mouseover', handleMouseOver);
-            node.removeEventListener('mouseout', handleMouseOut);
-        };
-    }, []);
-    return [ref, isHovered];
-}
-export function useOnClickOutside(ref, handler) {
-    useEffect(function () {
-        var listener = function (event) {
-            if (!ref.current || ref.current.contains(event.target))
-                return;
-            handler(event);
-        };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
-        return function () {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
-        };
-    }, [ref, handler]);
-}
-export function useIntersectionObserver(ref, _a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.root, root = _c === void 0 ? null : _c, _d = _b.rootMargin, rootMargin = _d === void 0 ? '0px' : _d, _e = _b.threshold, threshold = _e === void 0 ? 0 : _e;
-    var _f = useState(false), isIntersecting = _f[0], setIsIntersecting = _f[1];
-    useEffect(function () {
-        var observer = new IntersectionObserver(function (_a) {
-            var entry = _a[0];
-            return setIsIntersecting(entry.isIntersecting);
-        }, {
-            root: root,
-            rootMargin: rootMargin,
-            threshold: threshold,
-        });
-        var current = ref.current;
-        if (current)
-            observer.observe(current);
-        return function () {
-            if (current)
-                observer.unobserve(current);
-        };
-    }, [ref, root, rootMargin, threshold]);
-    return isIntersecting;
-}
-export function useHoverIntent() {
-    var _a = useState(false), isHovering = _a[0], setIsHovering = _a[1];
-    var ref = useRef(null);
-    useEffect(function () {
-        var node = ref.current;
-        if (!node)
-            return;
-        var timeout;
-        var handleMouseEnter = function () {
-            timeout = setTimeout(function () { return setIsHovering(true); }, 100);
-        };
-        var handleMouseLeave = function () {
-            clearTimeout(timeout);
-            setIsHovering(false);
-        };
-        node.addEventListener('mouseenter', handleMouseEnter);
-        node.addEventListener('mouseleave', handleMouseLeave);
-        return function () {
-            node.removeEventListener('mouseenter', handleMouseEnter);
-            node.removeEventListener('mouseleave', handleMouseLeave);
-        };
-    }, []);
-    return [ref, isHovering];
-}
-export var useDragDrop = function (onDrop) {
-    var _a = useState({
-        isDragging: false,
-        isOver: false,
-        draggedItemId: null,
-        overDropId: null,
-    }), state = _a[0], setState = _a[1];
-    var handleDragStart = useCallback(function (e, dragId) {
-        e.dataTransfer.setData('text/plain', dragId);
-        e.dataTransfer.effectAllowed = 'move';
-        setState({ isDragging: true, isOver: false, draggedItemId: dragId, overDropId: null });
-    }, []);
-    var handleDragOver = useCallback(function (e, dropId) {
-        e.preventDefault();
-        if (state.overDropId !== dropId) {
-            setState(function (s) { return (__assign(__assign({}, s), { isOver: true, overDropId: dropId })); });
-        }
-    }, [state.overDropId]);
-    var handleDragEnter = useCallback(function (e, dropId) {
-        e.preventDefault();
-        setState(function (s) { return (__assign(__assign({}, s), { isOver: true, overDropId: dropId })); });
-    }, []);
-    var handleDragLeave = useCallback(function (e, dropId) {
-        e.preventDefault();
-        if (state.overDropId === dropId) {
-            setState(function (s) { return (__assign(__assign({}, s), { isOver: false, overDropId: null })); });
-        }
-    }, [state.overDropId]);
-    var handleDrop = useCallback(function (e, dropId) {
-        e.preventDefault();
-        var dragId = e.dataTransfer.getData('text/plain');
-        setState({ isDragging: false, isOver: false, draggedItemId: dragId, overDropId: dropId });
-        onDrop(dragId, dropId);
-    }, [onDrop]);
-    return {
-        state: state,
-        bindDrag: function (dragId) { return ({
-            draggable: true,
-            onDragStart: function (e) { return handleDragStart(e, dragId); },
-        }); },
-        bindDrop: function (dropId) { return ({
-            onDragOver: function (e) { return handleDragOver(e, dropId); },
-            onDragEnter: function (e) { return handleDragEnter(e, dropId); },
-            onDragLeave: function (e) { return handleDragLeave(e, dropId); },
-            onDrop: function (e) { return handleDrop(e, dropId); },
-        }); },
-    };
-};
-export function useFocusTrap(ref) {
-    useEffect(function () {
-        var handleFocus = function (event) {
-            var _a, _b, _c;
-            if (!((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                var focusableElements = (_b = ref.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])');
-                (_c = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0]) === null || _c === void 0 ? void 0 : _c.focus();
-                event.preventDefault();
-            }
-        };
-        document.addEventListener('focusin', handleFocus);
-        return function () {
-            document.removeEventListener('focusin', handleFocus);
-        };
-    }, [ref]);
-}
-export function useFocus() {
-    var _a = useState(false), isFocused = _a[0], setIsFocused = _a[1];
-    var ref = useRef(null);
-    useEffect(function () {
-        var element = ref.current;
-        if (!element)
-            return;
-        var handleFocus = function () { return setIsFocused(true); };
-        var handleBlur = function () { return setIsFocused(false); };
-        element.addEventListener('focus', handleFocus);
-        element.addEventListener('blur', handleBlur);
-        return function () {
-            element.removeEventListener('focus', handleFocus);
-            element.removeEventListener('blur', handleBlur);
-        };
-    }, []);
-    return [ref, isFocused];
-}
-export function useElementSize() {
-    var _a = useState(null), ref = _a[0], setRef = _a[1];
-    var _b = useState({ width: 0, height: 0 }), size = _b[0], setSize = _b[1];
-    var handleSize = useCallback(function () {
-        if (ref) {
-            setSize({
-                width: ref.offsetWidth,
-                height: ref.offsetHeight,
-            });
-        }
-    }, [ref]);
-    var useEnviromentEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-    useEnviromentEffect(function () {
-        if (!ref)
-            return;
-        handleSize();
-        var resizeObserver = new ResizeObserver(handleSize);
-        resizeObserver.observe(ref);
-        return function () { return resizeObserver.disconnect(); };
-    }, [ref, handleSize]);
-    return [setRef, size];
-}
-export function useLockBodyScroll(lock) {
-    if (lock === void 0) { lock = true; }
-    useLayoutEffect(function () {
-        if (typeof document === 'undefined') {
-            return;
-        }
-        var originalStyle = window.getComputedStyle(document.body).overflow;
-        if (lock) {
-            document.body.style.overflow = 'hidden';
-        }
-        return function () {
-            if (lock) {
-                document.body.style.overflow = originalStyle;
-            }
-        };
-    }, [lock]);
-}
+import { getHook } from '../hookExecuter/hookExecuter';
 function Fallback(_a) {
     var error = _a.error;
     return (_jsxs(Box, { sx: { padding: 2 }, children: [process.env.NODE_ENV === 'production' && (_jsxs(Alert, { sx: { py: 0, borderLeft: '2px solid #00abff !important', border: '1px solid #d0cfcf' }, severity: "info", children: [_jsx(AlertTitle, { children: "Page Loading Error" }), "Please check your network connection..."] })), process.env.NODE_ENV !== 'production' && (_jsxs(Alert, { severity: "error", sx: { py: 0, borderTop: '2px solid #791212ad !important', border: '1px solid #d0cfcf' }, children: [_jsx(AlertTitle, { children: "Error" }), error.message] }))] }));
@@ -250,3 +52,23 @@ var LoadingScreen = function () {
 };
 // prettier-ignore
 export var DynamicLoader = function (Component) { return function (props) { return (_jsx(Error, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsx(Component, __assign({}, props)) }) })); }; };
+var AlertMessage = function (_a) {
+    var type = _a.type, msg = _a.msg, duration = _a.duration;
+    var _b = getHook('snackBar'), enqueueSnackbar = _b.enqueueSnackbar, closeSnackbar = _b.closeSnackbar;
+    if (msg !== undefined && msg !== '') {
+        enqueueSnackbar(msg !== null && msg !== void 0 ? msg : '', {
+            anchorOrigin: {
+                // @shivaji perpose dyanamic global alert.
+                horizontal: 'right',
+                vertical: 'top',
+            },
+            variant: type,
+            preventDuplicate: true,
+            // persist: true, whenever you want to close.
+            action: function (key) { return (_jsx(IconButton, { "aria-label": "close", size: "small", onClick: function () { return closeSnackbar(key); }, children: _jsx(Close, { fontSize: "small", sx: { color: '#fff' } }) })); },
+            autoHideDuration: duration !== null && duration !== void 0 ? duration : 6000,
+        });
+    }
+    return null;
+};
+export default AlertMessage;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import 'nprogress/nprogress.css';
-import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown } from './hooks/hooks';
+import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
 import { DynamicLoader } from './hooks/hooksComp';
-export { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader };
+import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown } from './hooks/hooks';
+export default ReactHooksWrapper;
+export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader };

package/dist/index.js

@@ -1,4 +1,6 @@
 import 'nprogress/nprogress.css';
-import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, } from './hooks/hooks';
+import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
 import { DynamicLoader } from './hooks/hooksComp';
-export { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader };
+import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, } from './hooks/hooks';
+export default ReactHooksWrapper;
+export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-toolkit",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "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",
@@ -28,6 +28,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.0.1",
     "@mui/material": "^5.14.0",
     "axios": "^1.7.8",
     "nprogress": "^0.2.0",