https://github.com/mdibyo/react-compose-context-consumers
Compose React 16 ContextConsumers
https://github.com/mdibyo/react-compose-context-consumers
Last synced: about 1 year ago
JSON representation
Compose React 16 ContextConsumers
- Host: GitHub
- URL: https://github.com/mdibyo/react-compose-context-consumers
- Owner: mDibyo
- Created: 2018-04-15T20:39:49.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-16T17:21:23.000Z (about 8 years ago)
- Last Synced: 2025-04-17T01:35:37.363Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 35.2 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-compose-context-consumers
Higher Order Components for composing React's `Context.Consumer`s. [See it in action!](https://codesandbox.io/s/pmy88rk640)
### Install
```bash
npm install --save react-compose-context-consumers
```
### Introduction
React 16.3 added [a new Context API](https://reactjs.org/blog/2018/03/29/react-v-16-3.html#official-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:
```jsx
// example copied from https://reactjs.org/docs/context.html#consuming-multiple-contexts
{theme => (
{user => (
)}
)}
```
This package provides a cleaner and more convenient way to compose `Context.Consumer`s:
```jsx
import Compose from 'react-compose-context-consumers';
...
{({ theme, user }) => (
)}
```
OR
```jsx
import { compose } from 'react-compose-context-consumers';
const Composed = compose(ThemeContext.Consumer, UserContext.Consumer);
...
{(theme, user) => (
)}
```