2019-08-09 18:46:45 +03:00
# compose
2019-08-02 01:06:42 +03:00
2019-08-09 18:46:45 +03:00
Simple provider compose for new [React useContext Api ](https://reactjs.org/docs/hooks-reference.html#usecontext ), [unstated-next ](https://github.com/jamiebuilds/unstated-next ) or same.
2019-08-02 01:06:42 +03:00
## Usage
2019-08-09 18:46:45 +03:00
unstated-next:
2019-08-02 01:06:42 +03:00
```
import React, { useState } from 'react';
import { createContainer } from 'unstated-next';
2019-08-19 11:36:22 +03:00
import { Compose } from 'provider-compose'; // < ---
2019-08-02 01:06:42 +03:00
const useProvider1 = () => {
const [a, setA] = useState(0);
return { a, setA }
}
const Provider1 = createContainer(useProvider1);
const ComponentA = (props) => {
const { a, setA } = Provider1.useContainer()
return < button onClick = {() = > setA(a + 1)}>A={a}< / button >
}
const useProvider2 = () => {
const [b, setB] = useState(0);
return { b, setB }
}
const Provider2 = createContainer(useProvider2);
const ComponentB = (props) => {
const { b, setB } = Provider2.useContainer()
return < button onClick = {() = > setB(b + 1)}>B={b}< / button >
}
const store = [Provider1.Provider, Provider2.Provider]; // < ---
export default () => (
< Compose providers = {store} > // < ---
< ComponentA / >
< ComponentB / >
< / Compose >
)
```