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>

OR

import { compose } from 'react-compose-context-consumers';
 
const Composed = compose(ThemeContext.Consumer, UserContext.Consumer);
 
...
 
<Composed>
  {(theme, user) => (
    <ProfilePage user={user} theme={theme} />
  )}
</Composed>