blob: e907e5f2f0273a94135f34bd1b59c9c7b5d36257 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
# compose
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.
## Usage
unstated-next:
```
import React, { useState } from 'react';
import { createContainer } from 'unstated-next';
import { Compose } from 'provider-compose'; // <---
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>
)
```
|
