Skip to content

Instantly share code, notes, and snippets.

@iammerrick

iammerrick/children-as-function.js

Created May 24, 2016 23:41
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save iammerrick/2d7b0398eae175d14687745bf95eda72 to your computer and use it in GitHub Desktop.
Save iammerrick/2d7b0398eae175d14687745bf95eda72 to your computer and use it in GitHub Desktop.
Download ZIP
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.
Raw
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>
Raw
higher-order-component.js
const ConfiguredChart = Ratio(Chart, {
x: 3,
y: 4,
width: Ratio.OPTIONS.FLUID
});
<ConfiguredChart id={this.props.id} />
@justgage
Copy link

justgage commented Mar 6, 2017 •
edited

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