react-hook-toolkit 1.0.6 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -4
- package/dist/contexts/DrowerContexts.d.ts +16 -0
- package/dist/contexts/DrowerContexts.js +35 -0
- package/dist/hooks/hooks.d.ts +1 -0
- package/dist/hooks/hooks.js +9 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,8 +24,8 @@ pnpm add react-hook-toolkit
|
|
|
24
24
|
## Features
|
|
25
25
|
Here's the properly structured documentation with clear purpose explanations:
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
📌 **useAxios**
|
|
27
|
+
---------------------------------------------------- **Custom Hooks** ------------------------------------------------
|
|
28
|
+
📌 **useAxios**
|
|
29
29
|
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.
|
|
30
30
|
```ts
|
|
31
31
|
const { data, loading, error, makeRequest, cancelRequest } = useAxios({ baseURL: '/api' });
|
|
@@ -35,6 +35,25 @@ useEffect(() => {
|
|
|
35
35
|
}, []);
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
+
📌 **useDrawer**
|
|
39
|
+
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.
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
const {
|
|
43
|
+
drawerOpen,
|
|
44
|
+
currentMainMenu,
|
|
45
|
+
openDrawer,
|
|
46
|
+
closeDrawer,
|
|
47
|
+
setCurrentMainMenu
|
|
48
|
+
} = useDrawer();
|
|
49
|
+
|
|
50
|
+
// Example usage:
|
|
51
|
+
<button onClick={openDrawer}>Open Menu</button>
|
|
52
|
+
<button onClick={() => setCurrentMainMenu('settings')}>
|
|
53
|
+
Show Settings
|
|
54
|
+
</button>
|
|
55
|
+
```
|
|
56
|
+
|
|
38
57
|
---
|
|
39
58
|
|
|
40
59
|
📌 **useAdvReducer**
|
|
@@ -575,8 +594,7 @@ useUpdateEffect(() => {
|
|
|
575
594
|
}, [value]);
|
|
576
595
|
```
|
|
577
596
|
|
|
578
|
-
|
|
579
|
-
---
|
|
597
|
+
------------------------------------------------ **Custom Components** --------------------------------------------
|
|
580
598
|
|
|
581
599
|
✅ **DynamicLoader**
|
|
582
600
|
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.
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
export interface DrawerContextValue {
|
|
3
|
+
drawerOpen: boolean;
|
|
4
|
+
openDrawer: () => void;
|
|
5
|
+
closeDrawer: () => void;
|
|
6
|
+
openDrawerInButton: () => void;
|
|
7
|
+
closeDrawerInButton: () => void;
|
|
8
|
+
currentMainMenu?: string;
|
|
9
|
+
setCurrentMainMenu?: (value: string) => void;
|
|
10
|
+
}
|
|
11
|
+
interface DrawerProviderProps {
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
}
|
|
14
|
+
declare const DrawerContext: import("react").Context<DrawerContextValue>;
|
|
15
|
+
export declare const DrawerProvider: FC<DrawerProviderProps>;
|
|
16
|
+
export default DrawerContext;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useState } from 'react';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
var DrawerContext = createContext({
|
|
5
|
+
drawerOpen: false,
|
|
6
|
+
openDrawer: function () { },
|
|
7
|
+
closeDrawer: function () { },
|
|
8
|
+
openDrawerInButton: function () { },
|
|
9
|
+
closeDrawerInButton: function () { },
|
|
10
|
+
currentMainMenu: '',
|
|
11
|
+
setCurrentMainMenu: function () { }
|
|
12
|
+
});
|
|
13
|
+
export var DrawerProvider = function (_a) {
|
|
14
|
+
var children = _a.children;
|
|
15
|
+
var _b = useState(true), drawerOpen = _b[0], setDrawer = _b[1];
|
|
16
|
+
var _c = useState(''), currentMainMenu = _c[0], setCurrOpenMenu = _c[1];
|
|
17
|
+
var openDrawer = function () { return setDrawer(true); };
|
|
18
|
+
var closeDrawer = function () { return setDrawer(false); };
|
|
19
|
+
var openDrawerInButton = function () { return setDrawer(false); };
|
|
20
|
+
var closeDrawerInButton = function () { return setDrawer(true); };
|
|
21
|
+
var setCurrentMainMenu = function (value) { return setCurrOpenMenu(value); };
|
|
22
|
+
return (_jsx(DrawerContext.Provider, { value: {
|
|
23
|
+
drawerOpen: drawerOpen,
|
|
24
|
+
openDrawer: openDrawer,
|
|
25
|
+
closeDrawer: closeDrawer,
|
|
26
|
+
openDrawerInButton: openDrawerInButton,
|
|
27
|
+
closeDrawerInButton: closeDrawerInButton,
|
|
28
|
+
currentMainMenu: currentMainMenu,
|
|
29
|
+
setCurrentMainMenu: setCurrentMainMenu
|
|
30
|
+
}, children: children }));
|
|
31
|
+
};
|
|
32
|
+
DrawerProvider.propTypes = {
|
|
33
|
+
children: PropTypes.node.isRequired
|
|
34
|
+
};
|
|
35
|
+
export default DrawerContext;
|
package/dist/hooks/hooks.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ interface UseAxiosConfig extends AxiosRequestConfig {
|
|
|
14
14
|
};
|
|
15
15
|
}
|
|
16
16
|
export declare const useAxios: <T>(config?: UseAxiosConfig) => UseAxiosResponse<T>;
|
|
17
|
+
export declare const useDrawer: () => import("../contexts/DrowerContexts").DrawerContextValue;
|
|
17
18
|
export declare const useAdvReducer: <State, Action extends {
|
|
18
19
|
type: string;
|
|
19
20
|
}>(initialState: State, actions: Record<string, (state: State, action: Action) => State>) => (state: State | undefined, action: Action) => State;
|
package/dist/hooks/hooks.js
CHANGED
|
@@ -54,8 +54,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
54
54
|
}
|
|
55
55
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
56
56
|
};
|
|
57
|
-
import { useState, useEffect, useCallback, useRef } from 'react';
|
|
57
|
+
import { useState, useEffect, useCallback, useRef, useContext } from 'react';
|
|
58
58
|
import axios, { AxiosError } from 'axios';
|
|
59
|
+
import DrawerContext from '../contexts/DrowerContexts';
|
|
59
60
|
var isReady = function () {
|
|
60
61
|
return typeof window !== "undefined" && typeof window.document !== "undefined"
|
|
61
62
|
? true
|
|
@@ -130,6 +131,13 @@ export var useAxios = function (config) {
|
|
|
130
131
|
cancelRequest: cancelRequest,
|
|
131
132
|
};
|
|
132
133
|
};
|
|
134
|
+
export var useDrawer = function () {
|
|
135
|
+
var context = useContext(DrawerContext);
|
|
136
|
+
if (context === undefined) {
|
|
137
|
+
throw new Error('useDrawer must be used within a DrawerProvider');
|
|
138
|
+
}
|
|
139
|
+
return context;
|
|
140
|
+
};
|
|
133
141
|
export var useAdvReducer = function (initialState, actions) { return function (state, action) {
|
|
134
142
|
if (state === void 0) { state = initialState; }
|
|
135
143
|
if (actions[action.type]) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-hook-toolkit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "Ultimate package for React developers, offering a powerful collection of hooks and components to enhance their development experience.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|