Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.
<Ratio width={Ratio.OPTIONS.FLUID} x={3} y={4}>
{(width, height) => (
<Chart id={this.props.id} width={width} height={height} />
)}
</Ratio>
const ConfiguredChart = Ratio(Chart, {
x: 3,
y: 4,
width: Ratio.OPTIONS.FLUID
});
<ConfiguredChart id={this.props.id} />
@justgage

This comment has been minimized.

Copy link

@justgage justgage commented Mar 6, 2017

I'm a little confused by this example so I'm going to try to port it to Elm.

are we creating a new Ratio component that we want to pass a configured chart?

ratio width x y ratioOptions children id = 
   --- implementation

-- children as function
view model = 
    ratio 2 4 Ratio.Options.Fluid [chart 1 12 43] model.id
-- higher order "components" (really just function)
configuredChart id = 
    ratio 2 4 Ratio.Options.Fluid id

view model =
    configuredChart model.id

I'm not sure if this is a great translation. I'm not sure I ever ran into this problem in Elm.

What problem is this trying to solve?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment