useContext added

Author: Minky1703

src/App.tsx

@@ -7,7 +7,10 @@ import { Click } from './components/Events/click';
 import { Input } from './components/Events/Input';
 import { Login } from './components/Hooks/Login';
 import { User } from './components/Hooks/User';
-import {Counter} from './components/Hooks/Counter'
+import {Counter} from './components/Hooks/Counter';
+
+import { Box } from './context/Box';
+import { ThemeContextProvider } from './context/ThemeContext';
 const App =() => {
   return (
     <>
@@ -27,6 +30,10 @@ const App =() => {
       <User />
       <h1>Reducer Hook</h1>
       <Counter />
+      <h1>useContextHook</h1>
+      <ThemeContextProvider>
+        <Box />
+      </ThemeContextProvider>
     </>
   );
 }

src/context/Box.tsx

@@ -0,0 +1,12 @@
+import {useContext} from 'react'
+import { ThemeContext } from './ThemeContext'
+export const Box = () => {
+  const theme = useContext(ThemeContext);
+  return (
+    <>
+      <div style={{ backgroundColor: theme.primary.main,color: theme.primary.text}}>
+        Theme context
+      </div>
+    </>
+  )
+}

src/context/ThemeContext.tsx

@@ -0,0 +1,16 @@
+import { createContext } from "react";
+import {theme} from './Theme'
+
+type ThemeContextProviderProps = {
+  children: React.ReactNode
+}
+
+export const ThemeContext = createContext(theme);
+
+export const ThemeContextProvider = ({children}:ThemeContextProviderProps) => {
+  return (
+    <ThemeContext.Provider value={theme}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}

src/context/theme.ts

@@ -0,0 +1,10 @@
+export const theme = {
+    primary: {
+      main: '#3f51b5',
+      text: '#fff',
+    },
+    secondary: {
+      main: '#f50057',
+      text: '#fff',
+    }
+  }