Skip to content

Commit dda1f83

Browse files
committed
chore: add new features on readme
1 parent 3f9e74e commit dda1f83

File tree

1 file changed

+44
-1
lines changed

1 file changed

+44
-1
lines changed

README.md

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
## 🧐   Why
1010

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:
1212

1313
![Bad](https://i.imgur.com/qmk3Bk5.png)
1414

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

3232
![Good](https://i.imgur.com/RXVlFwy.png)
3333

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:
37+
38+
```js
39+
import { adopt } from 'react-adopt'
40+
import MyCustomRenderProps from 'my-custom-render-props'
41+
42+
const Composed = adopt({
43+
custom: ({ render }) => <MyCustomRenderProps render={render} />
44+
})
45+
46+
const App = () => (
47+
<Composed>
48+
{({ custom }) => (
49+
<div>{custom.value}</div>
50+
)}
51+
</Composed>
52+
)
53+
```
54+
55+
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+
const Composed = adopt({
63+
greet: ({ initialGreet, render }) => (
64+
<Value initial={initialGreet}>{render}</Value>
65+
)
66+
})
67+
68+
const App = () => (
69+
<Composed initialGreet="Hi">
70+
{({ greet }) => (
71+
<div>{greet.value}</div>
72+
)}
73+
</Composed>
74+
)
75+
```
76+
3477
## 🕺 &nbsp; Contribute
3578

3679
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

Comments
 (0)