fold-render-props
v0.0.3
Published
Fold multiple render prop components into a single component.
Downloads
9
Readme
fold-render-props
Fold multiple render prop components into a single component.
Install
npm i fold-render-props -S
Basic Example
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⒞⒞THING⒞⒞THING⒞⒝</BIG>⒜" }
</pre>
</div>