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
+24-2Lines changed: 24 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@
14
14
-[Usage](#--usage-demo)
15
15
-[Working with new Context api](#working-with-new-context-api)
16
16
-[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)
18
18
-[Leading with multiple params](#leading-with-multiple-params)
19
19
-[Typescript support](#typescript-support)
20
20
-[Inline composition](#inline-composition)
@@ -134,7 +134,7 @@ const Composed = adopt({
134
134
</Composed>
135
135
```
136
136
137
-
### Mapping props from mappers
137
+
### Mapping props from mapper
138
138
139
139
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.
140
140
@@ -160,6 +160,28 @@ const App = () => (
160
160
)
161
161
```
162
162
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
+
constmapper= {
170
+
greet:<Value initial="Hi"/>,
171
+
name:<Value initial="John"/>,
172
+
}
173
+
174
+
constmapProps= ({ greet, name }) => ({
175
+
message:`${greet.value}${name.value}`,
176
+
})
177
+
178
+
constApp= () => (
179
+
<Adopt mapper={mapper} mapProps={mapProps}>
180
+
{({ message }) =>/* ... */}
181
+
</Adopt>
182
+
)
183
+
```
184
+
163
185
### Leading with multiple params
164
186
165
187
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