Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hlhr202/React-Combine-Provider
combine react providers in ease
https://github.com/hlhr202/React-Combine-Provider
constate hooks react react-context react-hooks react-state redux unstated
Last synced: 2 months ago
JSON representation
combine react providers in ease
- Host: GitHub
- URL: https://github.com/hlhr202/React-Combine-Provider
- Owner: hlhr202
- License: mit
- Created: 2019-05-28T11:16:16.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T05:51:47.000Z (over 1 year ago)
- Last Synced: 2024-03-30T08:43:05.129Z (3 months ago)
- Topics: constate, hooks, react, react-context, react-hooks, react-state, redux, unstated
- Language: TypeScript
- Size: 2.88 MB
- Stars: 32
- Watchers: 3
- Forks: 0
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-react-context - **react-combine-reducer** - Function that merge context providers in ease. Supports [**constate**](https://github.com/diegohaz/constate) and [**unstated-next**](https://github.com/jamiebuilds/unstated-next) in a simple way. (Libraries)
README
# React Combine Provider
[](https://www.npmjs.com/package/react-combine-provider)
[](https://coveralls.io/github/hlhr202/React-Combine-Provider?branch=master)
[](https://circleci.com/gh/hlhr202/React-Combine-Provider)
[](https://github.com/hlhr202/React-Combine-Provider/blob/master/LICENSE)
Combine react providers in ease
Requires React >= 16.8.0
Fully support [unstated-next](https://github.com/jamiebuilds/unstated-next) and [constate](https://github.com/diegohaz/constate)
## Install
```
npm install --save react-combine-provider
```
## Usage
- unstated
```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { createContainer } from 'unstated-next';
import { combineProviders } from 'react-combine-provider';
const useCounter1 = (initialState = 1) => {
const [count, setCount] = useState(initialState);
const decrement = () => setCount(count - 1);
const increment = () => setCount(count + 1);
return { count, decrement, increment };
};
const Counter1 = createContainer(useCounter1);
const useCounter2 = (initialState = 2) => {
const [count, setCount] = useState(initialState);
const decrement = () => setCount(count - 2);
const increment = () => setCount(count + 2);
return { count, decrement, increment };
};
const Counter2 = createContainer(useCounter2);
function CounterDisplay1() {
const counter1 = Counter1.useContainer();
console.log('rendering');
return (
counter display 1
counter 1
-
{counter1.count}
+
);
}
function CounterDisplay2() {
const counter1 = Counter1.useContainer();
const counter2 = Counter2.useContainer();
return (
counter display 2
counter 1
-
{counter1.count}
+
counter 2
-
{counter2.count}
+
);
}
const StateProviders = combineProviders([
[Counter1.Provider, { initialState: 5 }],
Counter2.Provider,
]);
function App() {
return (
);
}
ReactDOM.render(, document.getElementById('root'));
```
## TODO
- [] reference of hooks in another hooks
- [] dynamic hooks injection