fold-render-props
Fold multiple render prop components into a single component.
Install
npm i fold-render-props -SBasic Example
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>