Which API do you prefer? Passing a function into the Ratio component or making a higher order component called Ratio you can use to configure a component.

children-as-function.js

// parent A wants to show a list
<GetLastNImagesOfType type="jpg" numImages={10}>
  {(images) => {
    return images.map(image => <span>{image.name}</span>)
  }}
</GetLastNImagesOfType>

// parent B wants to show the images themselves
<GetLastNImagesOfType type="jpg" numImages={10}>
  {(images) => {
    return images.map(image => <img src={image.src} />)
  }}
</GetLastNImagesOfType>

Couldn't you do this with GetLastNImagesOfType(Component, { type: 'jpg', num: 10 }) and pass image as property to component?

@sprjr Thank you by the way for taking the time to explain this to me.

@iammerrick sure, no worries. The issue that would not be resolved is other things from the parent at time of render. This could be anything really, an example would perhaps be localizing:

  {(images) => {
    return images.map(image => <img src={image.src} alt={this.props.localize(image.alt)} />)
  }}

or attaching a ref:

// on the class
setImageRef(component) {
  // here we have a ref to the component, not to the HOC
  // if the HOC were to set a ref, it would be the owner
},

// down in render
  {(images) => {
    return images.map(image => <img src={image.src} ref={(c) => this.setImageRef(c)} />)
  }}