Fold multiple render prop components into a single component.
Fold multiple render prop components into a single component.
npm i fold-render-props -S
import folder from 'fold-render-props'
const ComponentA = props => {
return props.children({
name: props.name.toUpperCase()
})
}
const ComponentB = props =>
props.children({
name: props.name.big()
})
const ComponentC = props => {
return props.children({
name: props.name.repeat(3)
})
}
const Folder = folder([
(result, render) => (
<ComponentA name={'' + result.name + ''} children={render} />
),
(result, render) => (
<ComponentB name={'' + result.name + ''} children={render} />
),
(result, render) => (
<ComponentC name={'' + result.name + ''} children={render} />
)
])
// Usage
const MyComponent = (props) => (
<div>
<Folder name="thing">{r => <pre>{JSON.stringify(r)}</pre>}</Folder>
</div>
)
This renders
<div>
<pre>
{ "name": "<big>THING</big><big>THING</big><big>THING</big>" }
</pre>
</div>