https://github.com/mjancarik/consume-multiple-contexts
Utility for consuming multiple react contexts.
https://github.com/mjancarik/consume-multiple-contexts
context react
Last synced: 3 months ago
JSON representation
Utility for consuming multiple react contexts.
- Host: GitHub
- URL: https://github.com/mjancarik/consume-multiple-contexts
- Owner: mjancarik
- Created: 2018-04-11T15:57:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-30T11:51:59.000Z (about 7 years ago)
- Last Synced: 2025-07-01T10:05:46.223Z (3 months ago)
- Topics: context, react
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# consume-multiple-contexts
[](https://travis-ci.org/mjancarik/consume-multiple-contexts) [](https://david-dm.org/mjancarik/consume-multiple-contexts)
[](https://coveralls.io/github/mjancarik/consume-multiple-contexts?branch=master)
[](https://github.com/prettier/prettier)
Utility for consuming multiple react contexts. Look at the [example](https://codesandbox.io/s/7wwn58rxl0).
## Why?
It's common to have multiple contexts in React ecosystems and you need consuming them together in your components. In new context API is way for that but you must repeat consumers for every component. It's maybe good for few component but for large applications is pain. The module consume-multiple-contexts try to solve that problem.
## Installation
You can add the consume-multiple-contexts to your project using npm:
```
npm i consume-multiple-contexts --save
```
## Usage
I use example from React [documentation](https://reactjs.org/docs/context.html).
```javascript
const ThemeContext = React.createContext('light');
const UserContext = React.createContext();
class App extends React.Component {
render() {
const {signedInUser, theme} = this.props;
return (
);
}
}
function Layout() {
return (
);
}
function Content() {
return (
{theme => (
{user => (
)}
)}
);
}
function Sidebar() {
return (
{theme => (
{user => (
)}
)}
);
}
```
If you use consume-multiple-contexts module you can write:
```javascript
import { createNamedContext, createMultipleContexts } from 'consume-multiple-contexts';
const ThemeContext = React.createContext('light');
const UserContext = React.createContext();
const withContext = createMultipleContexts(
createNamedContext('theme', ThemeContext),
createNamedContext('user', UserContext)
);
.
.
function Content() {
return withContext(({ theme, user }) => (
));
}
function Sidebar() {
return withContext(({ theme, user }) => (
));
}
```
Or if you like HOC you can write:
```javascript
import { createNamedContext, withMultipleContextsFactory } from 'consume-multiple-contexts';
const ThemeContext = React.createContext('light');
const UserContext = React.createContext();
const multipleContexts = [
createNamedContext('theme', ThemeContext),
createNamedContext('user', UserContext)
];
const withContext = withMultipleContextsFactory(themeContext, userContext);
.
.
const Content = withContext(ProfilePage);
const Sidebar = withContext(ProfileSidebar);
```