Package Exports

react-compose-context-consumers

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-compose-context-consumers) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-compose-context-consumers

Higher Order Components for composing React's Context.Consumers. 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.Consumers 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.Consumers:

import Compose from 'react-compose-context-consumers';

...

<Compose theme={ThemeContext.Consumer} user={UserContext.Consumer}>
  {({ theme, user }) => (
    <ProfilePage user={user} theme={theme} />
  )}
</Compose>

import { compose } from 'react-compose-context-consumers';

const Composed = compose(ThemeContext.Consumer, UserContext.Consumer);

...

<Composed>
  {(theme, user) => (
    <ProfilePage user={user} theme={theme} />
  )}
</Composed>