React Context Provider and Consumer
Sat Dec 24 2022 11:43:43 GMT+0000 (Coordinated Universal Time)
Saved by
@Abizareei
#react.js
// Context
import React, {useState} from "react"
const ThemeContext = React.createContext()
function ThemeContextProvider(props) {
const [theme, setTheme] = useState("dark")
function toggleTheme() {
setTheme(prevTheme => prevTheme === "light" ? "dark" : "light")
}
return (
<ThemeContext.Provider value={{theme, toggleTheme}}>
{props.children}
</ThemeContext.Provider>
)
}
export {ThemeContextProvider, ThemeContext}
// index.js
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import {ThemeContextProvider} from "./themeContext"
ReactDOM.render(
<ThemeContextProvider>
<App />
</ThemeContextProvider>,
document.getElementById("root")
)
// App.js
import React from "react"
import Header from "./Header"
import Button from "./Button"
function App() {
return (
<div>
<Header />
<Button />
</div>
)
}
export default App
// Button.js
import React, {useContext} from "react"
import {ThemeContext} from "./themeContext"
function Button(props) {
const {theme, toggleTheme} = useContext(ThemeContext)
return (
<button
onClick={toggleTheme}
className={`${theme}-theme`}
>
Switch Theme
</button>
)
}
export default Button
// Header.js
import React, {useContext} from "react"
import {ThemeContext} from "./themeContext"
function Header(props) {
const {theme} = useContext(ThemeContext)
return (
<header className={`${theme}-theme`}>
<h2>{theme === "light" ? "Light" : "Dark"} Theme</h2>
</header>
)
}
export default Header
content_copyCOPY
Comments