Browse Source

Add mutliple contexts example

main
Alex Krolick 7 years ago
parent
commit
fec6d6c141
  1. 3
      content/docs/context.md
  2. 36
      examples/context/multiple-contexts.js

3
content/docs/context.md

@ -88,6 +88,9 @@ A more complex example with dynamic values for the theme:
**app.js** **app.js**
`embed:context/theme-detailed-app.js` `embed:context/theme-detailed-app.js`
## Consuming Multiple Contexts
`embed:context/multiple-contexts.js`
## Legacy API ## Legacy API
> The old context API was marked as legacy in React 16.3 and will be removed in version 17. > The old context API was marked as legacy in React 16.3 and will be removed in version 17.

36
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>
);
}
}
Loading…
Cancel
Save