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:
Jimmy Cleveland
2019-10-09 22:25:15 -06:00
committed by Alex Krolick
parent 0726327dbb
commit 454f44e7c0

View File

@@ -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.