Theme context

Author: gopinav

react-typescript-demo/src/App.tsx

@@ -7,6 +7,8 @@ import { Oscar } from './components/props/Oscar'
 import { Button } from './components/props/Button'
 import { Input } from './components/props/Input'
 import { Container } from './components/props/Container'
+import { ThemeContextProvider } from './components/context/ThemeContext'
+import { Box } from './components/context/Box'
 
 import './App.css'
 
@@ -48,6 +50,9 @@ function App() {
       />
       <Input value='' handleChange={event => console.log(event)} />
       <Container styles={{ border: '1px solid black', padding: '1rem' }} />
+      <ThemeContextProvider>
+        <Box />
+      </ThemeContextProvider>
     </div>
   )
 }

react-typescript-demo/src/components/context/Box.tsx

@@ -0,0 +1,15 @@
+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>
+  )
+}

react-typescript-demo/src/components/context/ThemeContext.tsx

@@ -0,0 +1,14 @@
+import React, { 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>
+}

react-typescript-demo/src/components/context/theme.ts

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