Skip to content

Commit

Permalink
Merge branch 'master' of github.com:pedronauck/react-adopt
Browse files Browse the repository at this point in the history
* 'master' of github.com:pedronauck/react-adopt:
  fix: readme
  • Loading branch information
pedronauck committed Apr 28, 2018
2 parents 4264287 + 9dd503f commit 2a165b4
Showing 1 changed file with 24 additions and 2 deletions.
26 changes: 24 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
- [Usage](#--usage-demo)
- [Working with new Context api](#working-with-new-context-api)
- [Custom render and retrieving props from composed](#custom-render-and-retrieving-props-from-composed)
- [Mapping props from mappers](#mapping-props-from-mappers)
- [Mapping props from mapper](#mapping-props-from-mapper)
- [Leading with multiple params](#leading-with-multiple-params)
- [Typescript support](#typescript-support)
- [Inline composition](#inline-composition)
Expand Down Expand Up @@ -134,7 +134,7 @@ const Composed = adopt({
</Composed>
```

### Mapping props from mappers
### Mapping props from mapper

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.

Expand All @@ -160,6 +160,28 @@ const App = () => (
)
```

You can do that using the `<Adopt />` component as well:

```js
import { Adopt } from 'react-adopt'
import { Value } from 'react-powerplug'

const mapper = {
greet: <Value initial="Hi" />,
name: <Value initial="John" />,
}

const mapProps = ({ greet, name }) => ({
message: `${greet.value} ${name.value}`,
})

const App = () => (
<Adopt mapper={mapper} mapProps={mapProps}>
{({ message }) => /* ... */}
</Adopt>
)
```

### Leading with multiple params

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):
Expand Down

0 comments on commit 2a165b4

Please sign in to comment.