consuming-multiple-contexts.md

Consuming Multiple Contexts

const ThemeContext = createContext('light')
const UserContext = createContext({ name: 'Guest' })

const Content = () => {
  const theme = useContext(ThemeContext)
  const user = useContext(UserContext)
  
  return (
    <ProfilePage
      user={user}
      theme={theme}
    />
  )
}

Or:

const Content = () => (
 <ThemeContext.Consumer>
   {theme => (
     <UserContext.Consumer>
       {user => (
         <ProfilePage user={user} theme={theme} />
       )}
     </UserContext.Consumer>
   )}
 </ThemeContext.Consumer>
)

const Layout = () => (
  <div>
    <Sidebar />
    <Content />
  </div>
)

const AppPage = ({ signedInUser, theme }) => (
  <ThemeContext.Provider value={theme}>
    <UserContext.Provider value={signedInUser}>
      <Layout />
    </UserContext.Provider>
  </ThemeContext.Provider>
)

---

Prev - Updating Context from a Nested Component | Next - useReducer