React Multi-Context 
Manage multiple contexts with a single React component.
Install
npm install react-multi-context --saveoryarn add react-multi-context
Test
npm run testoryarn test
Use
import createMultiContext from 'react-multi-context';
export const MyMultiContext = createMultiContext();Create the context by importing and executing createMultiContext wherever you want to create context.
Then, import that multi-context instance as needed.
Use the set prop to set a context's value.
Changing the value on a key-value pair in a context will cause all getters for that key to re-render.
Use the get prop to get a context's value.
Using this prop will execute the children render prop by passing the corresponding values of the context as the parameters.
Example
// Parent.js
import createMultiContext from 'react-multi-context';
// Context to provide to children.
export const ParentContext = createMultiContext();
export default class Parent extends React.Component {
render() {
return (
<ParentContext
set={{
cost: 10,
project: {
name: 'React Multi-Context',
version: 1.0
},
user: 'Charles'
}}
>
<Child />
</ParentContext>
);
}
}// Child.js
// Get the context provided from the parent
import { ParentContext } from './Parent';
export default class Child extends React.Component {
render() {
return (
<ParentContext get={[ 'project', 'user' ]}>
{(project, user) =>
/* This is a demo of React Multi-Context v1.0 by Charles! */
<p>This is a demo of {project.name} v{project.version} by {user}!</p>
}
</ParentContext>
);
}
}Example (Shorter)
// Parent - writes A and B
const Parent = () =>
<MultiContextInstance set={{ a: 1, b: 2 }}>
<Child1 />
<Child2 />
<Child3 />
</MultiContextInstance>;// Child1 - reads A
// Note: Each value is its own context, which is what makes this MULTI-context.
const Child1 = () =>
<MultiContextInstance get={[ 'a' ]}>
{(a) => `The value of A is ${a}!`}
</MultiContextInstance>;// Child2 - reads A and B
// Note: Reading multiple values will trigger a re-render if any one read value changes.
const Child2 = () =>
<MultiContextInstance get={[ 'a', 'b' ]}>
{(a, b) => `The value of A+B is ${a + b}!`}
</MultiContextInstance>;// Child3 - reads B and A
// Note: The order of the get prop corresponds to the order of the function parameters.
const Child3 = () =>
<MultiContextInstance get={[ 'b', 'a' ]}>
{(b, a) => `The value of A+B is ${a + b}!`}
</MultiContextInstance>;Default Values
You may pass an object of default values for the contexts as a parameter to createMultiContext or via the default prop.
const MyMultiContext = createMultiContext({ a: 0, b: 0 });or
<MyMultiContext
default={{ a: 0, b: 0 }}
set={{ a: 1 }}
>
<MyMultiContext get={[ 'b' ]}>
{b => 'I predict that B equals zero: ' + b}
</MyMultiContext>
</MyMultiContext>You do not need to do both.
MultiContext.with
MultiContextInstance.with(...multiContextKeys)(Component) will bind the multiContextKeys of MultiContextInstance to the props of Component.
import React from 'react';
import { SomeMultiContext } from './some-component';
class MyComponent extends React.PureComponent {
render() {
return <div children={'My name is ' + this.props.name + ', and I am ' + this.props.age + '!'} />;
}
}
// Binds the MultiContext's `name` property to MyComponent's `name` prop.
export default SomeMultiContext.with('name', 'age')(MyComponent);Sponsor 💗
If you are a fan of this project, you may become a sponsor via GitHub's Sponsors Program.