react-compose-context-consumers
v0.1.3
Published
Compose React 16.3 ContextConsumers
Downloads
39
Maintainers
Readme
react-compose-context-consumers
Higher Order Components for composing React's Context.Consumer
s. See it in action!
Install
npm install --save react-compose-context-consumers
Introduction
React 16.3 added a new Context API -
a Context.Provider
component (for providing the context value), and a Context.Consumer
component (for consuming the value).
Context.Consumer
s are added using render props.
A component might want to consume multiple contexts:
// example copied from https://reactjs.org/docs/context.html#consuming-multiple-contexts
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<ProfilePage user={user} theme={theme} />
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
This package provides a cleaner and more convenient way to compose Context.Consumer
s:
import Compose from 'react-compose-context-consumers';
...
<Compose theme={ThemeContext.Consumer} user={UserContext.Consumer}>
{({ theme, user }) => (
<ProfilePage user={user} theme={theme} />
)}
</Compose>
OR
import { compose } from 'react-compose-context-consumers';
const Composed = compose(ThemeContext.Consumer, UserContext.Consumer);
...
<Composed>
{(theme, user) => (
<ProfilePage user={user} theme={theme} />
)}
</Composed>