😎 React Adopt - Compose render props components like a pro
📜 Table of content
Render Props are the new hype of React's ecosystem, 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 this:
- Small. 0.7kb minified!
- Extremely Simple. Just a method!
React Adopt is a simple method that composes multiple render prop components, combining each prop result from your mapper.
Install as project dependency:
$ yarn add react-adopt
Now you can use React Adopt to compose your components. See below for an example using the awesome react-powerplug:
Working with new Context api
One use case that React Adopt can fit perfectly is when you need to use React's new context api that use render props to create some context:
import React from 'react'import adopt from 'react-adopt'const ThemeContext = Reactconst UserContext = Reactconst Context =<Context>theme user /* ... */</Context>
See this demo for a better explanation.
Custom render and retrieving props from composed
Some components don't use the
children prop for render props to work. For cases like this, you can pass a function instead of a jsx element to your mapper. This function will receive a
render prop that will be responsible for your render, the props passed on
Composed component, and the previous values from each mapper. See an example:
import adopt from 'react-adopt'import MyCustomRenderProps from 'my-custom-render-props'const Composed =<Composed>custom<div>customvalue</div></Composed>
You can also retrieve the properties passed to the composed component this way too:
import adopt from 'react-adopt'import Value from 'react-powerplug'const Composed =<Composed ="Hi">greet<div>greetvalue</div></Composed>
And get previous mapper results as prop for compose:
import adopt from 'react-adopt'import User Cart ShippingRate from 'my-containers'const Composed =<Composed>cart user shippingRates /* ... */</Composed>
Mapping props from mapper
Sometimes, get properties from your mappers can be kind of boring depending on how nested the result from each mapper. To easily avoid deeply nested objects or combine your results, you can map the final results into a single object using the
mapProps function as the second parameter.
const mapper =greet: <Value initial="Hi" />name: <Value initial="John" />const mapProps =message: ` `const Composed =const App =<Composed>/* ... */</Composed>
You can do that using the
<Adopt /> component as well:
const mapper =greet: <Value initial="Hi" />name: <Value initial="John" />const mapProps =message: ` `const App =<Adopt mapper=mapper mapProps=mapProps>/* ... */</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 and Mutation component from
react-apollo). In this case, you can do an arbitrary render with
render prop using your map value as a function:
const ADD_TODO = /* ... */const addTodo =<Mutation mutation=ADD_TODO>/* this is an arbitrary render where you will pass your two arguments into a single one */</Mutation>const Composed =const App =<Compose>/* ... */</Compose>
See this demo for a complete explanation about multiple params..
React Adopt has full typescript support when you need to type the composed component:
If you dont care about typings and need something more easy and quick, you can choose to use an inline composition by importing the
<Adopt> component and passing your mapper as a prop:
const mapper =greet: <Value initial="Hi" />name: <Value initial="John" /><Adopt mapper=mapper>/* ... */</Adopt>