idanilt/react-grid-hoc

Extract grid functionality outside from the components like in css grid layout

react-grid-hoc

Extract grid functionality outside from the components like in css grid layout

Please give feedback

Useful or not? Better alternatives? Does it the right direction?

Please comment on this issue or just send message on gitter

Roadmap

• 0.0.1 - initialize the project with the motivation in mind
• 0.0.2 - Collect feedback, useful or not, better alternatives and does it the right direction?
• 0.0.3 - Add gitter
• 0.0.4 - POC
• 0.0.5 - alpha - basic grid;
• 0.0.6 - beta - toolchain: tests, benchmark, build (es, AMD, TS, CommonJS), start (dev mode); support browsers; alternative for react (preact, Inferno); React native;
• 0.1.0 - first stable release

Browser goal:

IE9+, edge 13-15? Opera Mini, Opera Mobile, UC Browser for Android

Motivation

We have a simple Login component (excuse my ugly mock)

<Login>
      <User>
      <Pass>
      <LoginButton>
</Login>

Here we can see, we have 2 input and button, nice easy and declarative Now, let's add some grid

<Login>
  <Row>
    <Col>
      <User>
     </Col>
    <Col>
      <Pass>
    </Col>
  </Row>
  <Row>
    <Col>
      <LoginButton>
    </Col>
  </Row>
</Login>

It's got very ugly very fast, it's doesn't matter if it's flexbox, bootstrap or any other grid it will look like that. Flexbox can be good if you using only one dimension on your components But as soon as you have both horizontal and vertical elements you will have to again start use some extra components...

Css-grid-layout, exactly solve this problem perfectly:

<Login>
      <User>
      <Pass>
      <LoginButton>
</Login>

Login {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
User {
}
Pass { 
}
LoginButton {
  grid-column: 1 / 3;
  grid-row: 2;
}

Here you can see the grid is extracted perfectly to other component And as a bonus the grid behaver become match more declarative and easy to work with

So why not CSS Grid Layout? There are 2 reasons right now:

1. It's still very new... browser support etc...
2. Other react targets not know what is css-grid (e.g. react native)

Another consideration, the Polyfill are still buggy and slowly because it's using the DOM and not VD like React So here we go...

const grid = {
  Login {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
  }
  User {
  }
  Pass { 
  }
  LoginButton {
    grid-column: 1 / 3;
    grid-row: 2;
  }
}
<GridHOC styles={grid}>
  <Login>
        <User>
        <Pass>
        <LoginButton>
  </Login>
</GridHOC>

Our code is nice and clean weee ;) Than we can do:

1. Detect if we have css grid, than do nothing (trasform css-in-js to regular css)
2. Warp all children with grid elements, use flexbox as the foundation, we can run on old browser and react native

react-grid-hoc's Issues

Useful or not? Better alternatives? Does it the right direction?

Right now, seem like CSS-Grid is very close to production ready.
Most browser are supporting it by now.
Polyfills, might not give good experience but for sure will implement more from the official spec.
Also there is the "fallback" solution that can work really well for most website.

I really don't care about the spec, the goal is get rid of any unnecessary wrappers and containers...
css grid might not be the way this project will go to, it's just an inspiration for now.

I would find it useful for react native, react native got only Yoga, Flexbox implementation.
But they not seem battered by extra element or the lack of mult-dimensional.
The only think regard this issue I saw is: facebook/yoga#47

So the bottom line, would you use it?