Browse Source

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.
main
Jimmy Cleveland 5 years ago
committed by Alex Krolick
parent
commit
454f44e7c0
  1. 44
      content/docs/hooks-reference.md

44
content/docs/hooks-reference.md

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

Loading…
Cancel
Save