Skip to content

Commit 2a165b4

Browse files
committed
Merge branch 'master' of github.com:pedronauck/react-adopt
* 'master' of github.com:pedronauck/react-adopt: fix: readme
2 parents 4264287 + 9dd503f commit 2a165b4

File tree

1 file changed

+24
-2
lines changed

1 file changed

+24
-2
lines changed

README.md

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
- [Usage](#--usage-demo)
1515
- [Working with new Context api](#working-with-new-context-api)
1616
- [Custom render and retrieving props from composed](#custom-render-and-retrieving-props-from-composed)
17-
- [Mapping props from mappers](#mapping-props-from-mappers)
17+
- [Mapping props from mapper](#mapping-props-from-mapper)
1818
- [Leading with multiple params](#leading-with-multiple-params)
1919
- [Typescript support](#typescript-support)
2020
- [Inline composition](#inline-composition)
@@ -134,7 +134,7 @@ const Composed = adopt({
134134
</Composed>
135135
```
136136

137-
### Mapping props from mappers
137+
### Mapping props from mapper
138138

139139
Sometimes get properties from your mappers can be kind a boring depending how nest is the result from each mapper. To easily avoid deep nested objects or combine your results, you can map the final results into a single object using de `mapProps` function as second parameter.
140140

@@ -160,6 +160,28 @@ const App = () => (
160160
)
161161
```
162162

163+
You can do that using the `<Adopt />` component as well:
164+
165+
```js
166+
import { Adopt } from 'react-adopt'
167+
import { Value } from 'react-powerplug'
168+
169+
const mapper = {
170+
greet: <Value initial="Hi" />,
171+
name: <Value initial="John" />,
172+
}
173+
174+
const mapProps = ({ greet, name }) => ({
175+
message: `${greet.value} ${name.value}`,
176+
})
177+
178+
const App = () => (
179+
<Adopt mapper={mapper} mapProps={mapProps}>
180+
{({ message }) => /* ... */}
181+
</Adopt>
182+
)
183+
```
184+
163185
### Leading with multiple params
164186

165187
Some render props components return multiple arguments in the children function instead of a single one (see a simple example in the new [Query](https://www.apollographql.com/docs/react/essentials/queries.html#basic) and [Mutation](https://www.apollographql.com/docs/react/essentials/mutations.html) component from `react-apollo`). In this case, you can do an arbitrary render with `render` prop [using your map value as a function](#custom-render-and-retrieving-props-from-composed):

0 commit comments

Comments
 (0)