From f78739e6488126518a29cf5fb0f9c9d6e7b90b3b Mon Sep 17 00:00:00 2001
From: Jimmy Cleveland <jimmydalecleveland@gmail.com>
Date: Tue, 8 Oct 2019 21:18:59 -0600
Subject: [PATCH 1/2] Add usage example for useContext.

The intent is to show where the hook fits in to the usual Context usage.
---
 content/docs/hooks-reference.md | 45 +++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index 41464b47d32..630bd8061e0 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -196,6 +196,51 @@ 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-37}
+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);
+
+  // Button is a component that is styled based on a 'theme'
+  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.

From ee639d32d6446a62eaaa7d7214e059fdb97b5599 Mon Sep 17 00:00:00 2001
From: Jimmy Cleveland <jimmydalecleveland@gmail.com>
Date: Wed, 9 Oct 2019 22:04:00 -0600
Subject: [PATCH 2/2] Remove unnecessary comment in code block.

---
 content/docs/hooks-reference.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index 630bd8061e0..852ae483303 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -197,7 +197,7 @@ 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-37}
+```js{31-36}
 const themes = {
   light: {
     foreground: "#000000",
@@ -230,7 +230,6 @@ function Toolbar(props) {
 function ThemedButton() {
   const theme = useContext(ThemeContext);
 
-  // Button is a component that is styled based on a 'theme'
   return (
     <button style={{ background: theme.background, color: theme.foreground }}>
       I am styled by theme context!