react-merged-context
v1.0.2react-merged-context
A simple library for creating a context provider that merges together the context values throughtout the React tree.
Check it out in action at react-merged-context.netlify.app.
Installation
This package lives in npm. To install the latest stable version, run the following command:
npm install react-merged-context
Or if you're using yarn:
yarn add react-merged-context
Usage
You can create a merged context provider by passing your context to the createMergedProvider
method.
This will return a "merged context provider" which you can use
import { createContext } from 'react';
import { createMergedProvider } from 'react-merged-context';
const MyContext = createContext({ name: 'Sarah' })
const MyContextProvider = createMergedProvider(MyContext);
const element = <MyContextProvider value={...}>
...
</MyContextProvider>;
Getting the value
Since createMergedProvider
just creates a "Provider" component, you can retrieve the value from the context using the normal methods - either through Context.Consumer
or useContext
.
Objects
Merged context providers can be used to apply a diff to the context.
import { createContext } from 'react';
import { createMergedProvider } from 'react-merged-context';
const MyContext = createContext({ name: 'Bennett', age: 22 })
const MyContextProvider = createMergedProvider(MyContext);
const element = <MyContextProvider value={{ name: 'Sarah' }}>
<MyContext.Consumer>
({ name, age }) => {
// `name` is 'Sarah' but `age` is still 22
}
</MyContext.Consumer>
</MyContextProvider>;
Arrays
Merged context providers can also be used to concat arrays.
import { createContext } from 'react';
import { createMergedProvider } from 'react-merged-context';
const MyContext = createContext([ 1, 2, 3 ])
const MyContextProvider = createMergedProvider(MyContext);
const element = <MyContextProvider value={[ 4, 5, 6 ]}>
<MyContext.Consumer>
(values) => {
// values is [ 1, 2, 3, 4, 5, 6 ]
}
</MyContext.Consumer>
</MyContextProvider>;
Resetting with React context providers
You can use normal context providers to reset the value of the context.
import { createContext } from 'react';
import { createMergedProvider } from 'react-merged-context';
const MyContext = createContext([ 1, 2, 3 ])
const MyContextProvider = createMergedProvider(MyContext);
const element = <MyContext.Provider value={[]}>
<MyContextProvider value={[ 4, 5, 6 ]}>
<MyContext.Consumer>
(values) => {
// values is [ 4, 5, 6 ]
}
</MyContext.Consumer>
</MyContextProvider>;
</MyContext.Provider>
Example
You can view the example live at react-merged-context.netlify.app.
To run the example locally:
- navigate to
example/
- install the dependencies by running
yarn
- run
yarn start
to start the dev server - navigate to
localhost:1234
License
MIT.
Metadata
- MIT
- >=10
- Bennett Hardwick
- released 11/17/2020