From fec6d6c141def553e71aa189da30aa687db31035 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 21:01:59 -0700
Subject: [PATCH] Add mutliple contexts example

---
 content/docs/context.md               |  3 +++
 examples/context/multiple-contexts.js | 36 +++++++++++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 examples/context/multiple-contexts.js

diff --git a/content/docs/context.md b/content/docs/context.md
index 2f0b3c603..7c158a4e9 100644
--- a/content/docs/context.md
+++ b/content/docs/context.md
@@ -88,6 +88,9 @@ A more complex example with dynamic values for the theme:
 **app.js**
 `embed:context/theme-detailed-app.js`
 
+## Consuming Multiple Contexts
+
+`embed:context/multiple-contexts.js`
 ## Legacy API
 
 > The old context API was marked as legacy in React 16.3 and will be removed in version 17.
diff --git a/examples/context/multiple-contexts.js b/examples/context/multiple-contexts.js
new file mode 100644
index 000000000..494e8cd4b
--- /dev/null
+++ b/examples/context/multiple-contexts.js
@@ -0,0 +1,36 @@
+// Create a theme context, defaulting to light theme
+// highlight-next-line
+const ThemeContext = React.createContext('light');
+
+// Signed-in user context
+const UserContext = React.createContext();
+
+class App extends React.Component {
+  static propTypes = {
+    theme: PropTypes.string,
+    signedInUser: PropTypes.shape({
+      id: number,
+      name: string,
+      avatar: string,
+    }),
+  };
+
+  render() {
+    return (
+      <ThemeContext.Provider value={this.props.theme}>
+        <UserContext.Provider
+          value={this.props.signedInUser}>
+          <ThemeContext.Consumer>
+            {theme => (
+              <UserContext.Consumer>
+                {user => (
+                  <ProfilePage user={user} theme={theme} />
+                )}
+              </UserContext.Consumer>
+            )}
+          </ThemeContext.Consumer>
+        </UserContext.Provider>
+      </ThemeContext.Provider>
+    );
+  }
+}