@react-pakistan/util-functions 1.24.2 → 1.24.4
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/index.js +1 -0
- package/module/my-module.d.ts +0 -0
- package/module/my-module.js +69 -0
- package/package.json +1 -1
package/index.js
CHANGED
|
File without changes
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
// /* eslint-disable */
|
|
2
|
+
// import React, { useReducer, createContext, useContext } from 'react';
|
|
3
|
+
// // 1. Define your state shape and actions
|
|
4
|
+
// type State = {
|
|
5
|
+
// // Your state properties here
|
|
6
|
+
// count: number;
|
|
7
|
+
// isLoading: boolean;
|
|
8
|
+
// };
|
|
9
|
+
// type Action =
|
|
10
|
+
// | { type: 'INCREMENT' }
|
|
11
|
+
// | { type: 'DECREMENT' }
|
|
12
|
+
// | { type: 'SET_LOADING'; payload: boolean };
|
|
13
|
+
// // 2. Create a context for your module
|
|
14
|
+
// const MyModuleContext = createContext<{
|
|
15
|
+
// state: State;
|
|
16
|
+
// dispatch: React.Dispatch<Action>;
|
|
17
|
+
// } | undefined>(undefined);
|
|
18
|
+
// // 3. Reducer function
|
|
19
|
+
// const reducer = (state: State, action: Action): State => {
|
|
20
|
+
// switch (action.type) {
|
|
21
|
+
// case 'INCREMENT':
|
|
22
|
+
// return { ...state, count: state.count + 1 };
|
|
23
|
+
// case 'DECREMENT':
|
|
24
|
+
// return { ...state, count: state.count - 1 };
|
|
25
|
+
// case 'SET_LOADING':
|
|
26
|
+
// return { ...state, isLoading: action.payload };
|
|
27
|
+
// default:
|
|
28
|
+
// return state;
|
|
29
|
+
// }
|
|
30
|
+
// };
|
|
31
|
+
// // 4. Provider component
|
|
32
|
+
// type MyModuleProviderProps = {
|
|
33
|
+
// children: React.ReactNode;
|
|
34
|
+
// initialState?: Partial<State>;
|
|
35
|
+
// };
|
|
36
|
+
// export const MyModuleProvider: React.FC<MyModuleProviderProps> = ({
|
|
37
|
+
// children,
|
|
38
|
+
// initialState,
|
|
39
|
+
// }) => {
|
|
40
|
+
// const [state, dispatch] = useReducer(reducer, {
|
|
41
|
+
// count: 0,
|
|
42
|
+
// isLoading: false,
|
|
43
|
+
// ...initialState,
|
|
44
|
+
// });
|
|
45
|
+
// return (
|
|
46
|
+
// <MyModuleContext.Provider value={{ state, dispatch }}>
|
|
47
|
+
// {children}
|
|
48
|
+
// </MyModuleContext.Provider>
|
|
49
|
+
// );
|
|
50
|
+
// };
|
|
51
|
+
// // 5. Custom hook to access the context
|
|
52
|
+
// export const useMyModule = () => {
|
|
53
|
+
// const context = useContext(MyModuleContext);
|
|
54
|
+
// if (context === undefined) {
|
|
55
|
+
// throw new Error('useMyModule must be used within a MyModuleProvider');
|
|
56
|
+
// }
|
|
57
|
+
// return context;
|
|
58
|
+
// };
|
|
59
|
+
// // 6. Your actual module components
|
|
60
|
+
// export const Counter: React.FC = () => {
|
|
61
|
+
// const { state, dispatch } = useMyModule();
|
|
62
|
+
// return (
|
|
63
|
+
// <div>
|
|
64
|
+
// <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
|
|
65
|
+
// <span>{state.count}</span>
|
|
66
|
+
// <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
|
|
67
|
+
// </div>
|
|
68
|
+
// );
|
|
69
|
+
// };
|