mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
Add usage example for useContext. (#2414)
* Add usage example for useContext. The intent is to show where the hook fits in to the usual Context usage. * Remove unnecessary comment in code block.
This commit is contained in:
committed by
Alex Krolick
parent
0726327dbb
commit
454f44e7c0
@@ -196,6 +196,50 @@ A component calling `useContext` will always re-render when the context value ch
|
||||
>
|
||||
>`useContext(MyContext)` only lets you *read* the context and subscribe to its changes. You still need a `<MyContext.Provider>` above in the tree to *provide* the value for this context.
|
||||
|
||||
**Putting it together with Context.Provider**
|
||||
```js{31-36}
|
||||
const themes = {
|
||||
light: {
|
||||
foreground: "#000000",
|
||||
background: "#eeeeee"
|
||||
},
|
||||
dark: {
|
||||
foreground: "#ffffff",
|
||||
background: "#222222"
|
||||
}
|
||||
};
|
||||
|
||||
const ThemeContext = React.createContext(themes.light);
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeContext.Provider value={themes.dark}>
|
||||
<Toolbar />
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function Toolbar(props) {
|
||||
return (
|
||||
<div>
|
||||
<ThemedButton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ThemedButton() {
|
||||
const theme = useContext(ThemeContext);
|
||||
|
||||
return (
|
||||
<button style={{ background: theme.background, color: theme.foreground }}>
|
||||
I am styled by theme context!
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
This example is modified for hooks from a previous example in the [Context Advanced Guide](/docs/context.html), where you can find more information about when and how to use Context.
|
||||
|
||||
|
||||
## Additional Hooks {#additional-hooks}
|
||||
|
||||
The following Hooks are either variants of the basic ones from the previous section, or only needed for specific edge cases. Don't stress about learning them up front.
|
||||
|
||||
Reference in New Issue
Block a user