fold-render-props

0.0.3 • Public • Published

fold-render-props

Fold multiple render prop components into a single component.

npm version Build Status codecov

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>

Package Sidebar

Install

npm i fold-render-props

Weekly Downloads

3

Version

0.0.3

License

MIT

Unpacked Size

27.3 kB

Total Files

11

Last publish

Collaborators

  • tkh44