You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+44-1Lines changed: 44 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@
8
8
9
9
## 🧐 Why
10
10
11
-
[Render Props](https://reactjs.org/docs/render-props.html) are the new hype of React's ecossystem, that's a fact. So, when you need to use more than one render props component together, this can be borring and generate something called a "render props callback hell", like that:
11
+
[Render Props](https://reactjs.org/docs/render-props.html) are the new hype of React's ecossystem, that's a fact. So, when you need to use more than one render props component together, this can be boring and generate something called a *"render props callback hell"*, like that:
12
12
13
13

14
14
@@ -31,6 +31,49 @@ Now you can use adopt to compose your components. See above an example using the
31
31
32
32

33
33
34
+
### Custom render and retrieving props from composed
35
+
36
+
Some components don't use the `children` property as render props. For cases like that, you can pass a function as mapper value that will return your component. This function will receive as props the `render` method, the props passed on `Composed` component and the previous values from each mapper. See an example:
And as I said above, you can retrieve the properties passed to the composed component using that way too:
56
+
57
+
58
+
```js
59
+
import { adopt } from'react-adopt'
60
+
import { Value } from'react-powerplug'
61
+
62
+
constComposed=adopt({
63
+
greet: ({ initialGreet, render }) => (
64
+
<Value initial={initialGreet}>{render}</Value>
65
+
)
66
+
})
67
+
68
+
constApp= () => (
69
+
<Composed initialGreet="Hi">
70
+
{({ greet }) => (
71
+
<div>{greet.value}</div>
72
+
)}
73
+
</Composed>
74
+
)
75
+
```
76
+
34
77
## 🕺 Contribute
35
78
36
79
1.[Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device
0 commit comments