Wondering what’s next for npm?Check out our public roadmap! »

    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>
    

    Install

    npm i fold-render-props

    DownloadsWeekly Downloads

    2

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    27.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar