Make a HOC version

[jgoux]

Hello,

I really like the API you built for this library. 👍

What would be the scenario when you want to integrate with custom/third-party components ?

For example, imagine I want to create a layout using multiple Paper from material-ui.

To make the Paper a flex element, I'd have to modify its style property (this is what I do at the moment), but I could do better and encapsulate all the "position/layout" logic inside HOC components which would apply the flexbox styles to their children, taking the API you provide :

import { AppBar, Paper } from "material-ui"
import { Box, Flex, Boxed, Flexed } from "reflexbox"

const view = (props) =>

<Flex auto column>
  <AppBar />
  <Flex auto>
    {/* Apply the styles generated from <Boxed auto> to <Paper>Left</Paper> */}
    <Boxed auto>
      <Paper>Left</Paper>
    </Boxed>
    <Boxed auto>
      <Paper>Right</Paper>
    </Boxed>
  </Flex>
</Flex>

I used Boxed and Flexed but the name/API could be anything.

What do you think ? 😄

[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 ! 👍