https://github.com/bennetthardwick/react-merged-context
A simple library for creating a context provider that merges with its parent's values.
https://github.com/bennetthardwick/react-merged-context
react react-context react-hooks react-native reactjs
Last synced: about 1 year ago
JSON representation
A simple library for creating a context provider that merges with its parent's values.
- Host: GitHub
- URL: https://github.com/bennetthardwick/react-merged-context
- Owner: bennetthardwick
- License: mit
- Created: 2020-11-17T10:24:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-17T12:02:14.000Z (over 5 years ago)
- Last Synced: 2025-04-20T00:38:08.738Z (about 1 year ago)
- Topics: react, react-context, react-hooks, react-native, reactjs
- Language: TypeScript
- Homepage: https://react-merged-context.netlify.app/
- Size: 308 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-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](https://react-merged-context.netlify.app/).
## Installation
This package lives in [npm](https://www.npmjs.com/get-npm). To install the latest stable version, run the following command:
```bash
npm install react-merged-context
```
Or if you're using [yarn](https://classic.yarnpkg.com/en/docs/install/):
```bash
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
```ts
import { createContext } from 'react';
import { createMergedProvider } from 'react-merged-context';
const MyContext = createContext({ name: 'Sarah' })
const MyContextProvider = createMergedProvider(MyContext);
const element =
...
;
```
### 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.
```ts
import { createContext } from 'react';
import { createMergedProvider } from 'react-merged-context';
const MyContext = createContext({ name: 'Bennett', age: 22 })
const MyContextProvider = createMergedProvider(MyContext);
const element =
({ name, age }) => {
// `name` is 'Sarah' but `age` is still 22
}
;
```
### Arrays
Merged context providers can also be used to concat arrays.
```ts
import { createContext } from 'react';
import { createMergedProvider } from 'react-merged-context';
const MyContext = createContext([ 1, 2, 3 ])
const MyContextProvider = createMergedProvider(MyContext);
const element =
(values) => {
// values is [ 1, 2, 3, 4, 5, 6 ]
}
;
```
### Resetting with React context providers
You can use normal context providers to reset the value of the context.
```ts
import { createContext } from 'react';
import { createMergedProvider } from 'react-merged-context';
const MyContext = createContext([ 1, 2, 3 ])
const MyContextProvider = createMergedProvider(MyContext);
const element =
(values) => {
// values is [ 4, 5, 6 ]
}
;
```
## Example
You can view the example live at [react-merged-context.netlify.app](https://react-merged-context.netlify.app/).
To run the example locally:
1. navigate to `example/`
2. install the dependencies by running `yarn`
3. run `yarn start` to start the dev server
4. navigate to `localhost:1234`
## License
[MIT](https://github.com/bennetthardwick/react-merged-context/blob/master/LICENSE).