Make a HOC version about reflexbox

[jxnblk]

I've certainly been thinking about this. I was thinking more of having an API that looks something like this, but maybe there's good reason not to go with this approach:

<Box
  Component={Paper}
  {...boxProps}
  {...paperProps} />

The Box component would pass styles based on its props, then render Paper. Curious what you think

[jgoux]

I think it's a matter of taste.

I prefer seeing a component's own props attached to its tag.
I also prefer seeing the tags tree composition, it reduces the cognitive load for me.

So I don't have a definitive answer for this, but I'm also curious of reading others opinions. ⁉️

[mrtnbroder]

I'm with @jgoux. I'd prefer seeing my props on the component tag.

[jxnblk]

I'm not opposed to the nested component approach. One thing that feels odd to me is that the jsx looks like two elements, but it's only generating one. Maybe that's an okay trade off in this situation.

[jgoux]

We could also use a simple function:

import { AppBar, Paper } from "material-ui"
import { Box, Flex, box, flex } from "reflexbox"

const view = (props) =>

<Flex auto column>
  <AppBar />
  <Flex auto>
  {box({ auto: true })(
    <Paper>Left</Paper>
  )}
  {box({ auto: true })(
    <Paper>Right</Paper>
  )}
  </Flex>
</Flex>

With the partial application, you can even prepare common patterns :

import { AppBar, Paper } from "material-ui"
import { Box, Flex, box, flex } from "reflexbox"

const CustomBox = box({ auto: true })

const view = (props) =>

<Flex auto column>
  <AppBar />
  <Flex auto>
  {CustomBox(
    <Paper>Left</Paper>
  )}
  {CustomBox(
    <Paper>Right</Paper>
  )}
  </Flex>
</Flex>

[jxnblk]

The latest version 1.1.0 supports an is prop to pass components or elements to render as the root. I'll take a stab at wrapper component as well at some point.

[jgoux]

Congrats for the release ! 👍