[add]useContext

src/components/MainMenu/sliderConfig.ts

@@ -53,6 +53,11 @@ export const sliderConfig = [
                 label: 'hooks useEffect',
                 path: '/case/useEffect'
             },
+            {
+                key: 33,
+                label: 'hooks useContext',
+                path: '/case/useContext'
+            },
         ]
     }
 ]

src/routers/index.tsx

@@ -9,6 +9,7 @@ const Test = lazy(() => import('../views/Test'))
 const Test1 = lazy(() => import('../views/Test/test1.tsx'))
 const UseRef = lazy(() => import('../views/Case/useRef.tsx'))
 const UseEffect = lazy(() => import('../views/Case/useEffect.tsx'))
+const UseContext = lazy(() => import('../views/Case/useContext.tsx'))
 
 import { defaultAuthLoad } from './auth'
 
@@ -90,6 +91,14 @@ const routes = [
                     role: ['admin']
                 }),
             },
+            {
+                path: '/case/useContext',
+                element: defaultAuthLoad(lazyLoading(<UseContext />), {
+                    title: 'hooks useContext',
+                    role: ['admin']
+                }),
+            },
+
         ]
     },
     {

src/views/Case/contextChild.tsx

@@ -0,0 +1,19 @@
+import { Context } from './useContext';
+
+const contextChild = () => {
+    return (
+        <div>
+            <h1>Context Child</h1>
+            <Context.Consumer>
+                {
+                    (value) => {
+                        return <h2>{value.test}</h2>
+                    }
+                }
+            </Context.Consumer>
+
+        </div>
+    );
+}
+
+export default contextChild;

src/views/Case/useContext.tsx

@@ -0,0 +1,25 @@
+import { createContext } from "react"; 
+import ContextChild from "./contextChild";
+
+type contextTheme = {
+    test: string | null
+}
+
+export const Context = createContext<contextTheme>({
+    test: null 
+});
+
+const useContextCase = () => {
+    return (
+        <div>
+            useContextCase
+            <Context.Provider value={{
+                test: '111'
+            }}>
+                <ContextChild />
+            </Context.Provider>
+        </div>
+    )
+}
+
+export default useContextCase;