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

<Ratio width={Ratio.OPTIONS.FLUID} x={3} y={4}>
  {(width, height) => (
    <Chart id={this.props.id} width={width} height={height} />
  )}
</Ratio>

higher-order-component.js

const ConfiguredChart = Ratio(Chart, {
  x: 3,
  y: 4,
  width: Ratio.OPTIONS.FLUID
});

<ConfiguredChart id={this.props.id} />