fold-render-props

Fold multiple render prop components into a single component.

Install

npm i fold-render-props -S

Basic 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>