Flexbox Rows and Columns made easy in React.js

Get some direction of your content…

The Journey

1. Creepy code
2. The direction component
3. Fetch the props
4. Build <Row> and <Column>

1. Creepy code

Will this code give you the creeps?

import React from ‘react’;
export default() => {
return (
  <div style={{display: ‘flex’, flexDirection: ‘column’}}>
    <div style={{display: ‘flex’, flexDirection: ‘row’}}>
      <div style={{display: ‘flex’, flexDirection: ‘column’}}>
        <div style={{display: ‘flex’, flexDirection: ‘row’}}>
          Child content
        </div>
        <div style={{display: ‘flex’, flexDirection: ‘row’}}>
          Child content
        </div>
      </div>
      <div style={{display: ‘flex’, flexDirection: ‘column’}}>
        <div style={{display: ‘flex’, flexDirection: ‘row’}}>
          Child content
        </div>
        <div style={{display: ‘flex’, flexDirection: ‘row’}}>
          Child content
        </div>
      </div>
    </div>
  </div>
 );
}

To much style-code for so little.
Maybe you make some classy stylesheet instead?

.Column, Row {
  display: flex;
}
.Row {
  flex-direction: row;
}
.Column {
  flex-direction: column;
}

Still hard to tell which way the divs is going:

import React from ‘react’;
import './styles.css';
export default() => {
return (
  <div className=”column”>
    <div className="row">
      <div className="column">
        <div className="row">
          Child content
        </div>
        <div className="row">
          Child content
        </div>
      </div>
      <div className="column">
        <div className="row">
          Child content
        </div>
        <div className="row">
          Child content
        </div>
      </div>
    </div>
  </div>
 );
}

Wouldn’t it be nice if you right away could tell the direction of the div?
Well… There is…

import React from ‘react’;
import './styles.css';
import Row from './row';
import Column from './column';
export default() => {
return (
  <Column>
    <Row>
      <Column>
        <Row>Child content</Row>
        <Row>Child content</Row>
      </Column>
      <Column>
        <Row>Child content</Row>
        <Row>Child content</Row>
      </Column>
    </Row>
  </Column>
 );
}

Let do it!

2. The direction component

This is what we aiming for — a small, but efficient component:

import React from ‘react’;
export default ({children, className, style}) => {
  return (
    <div 
      className={className}
      style={{ …style, display: 'flex', flexDirection: 'row' }}
     >
       {children}
    </div>
  )
}

And this is some examples how it is used in parent component:

<Row className="RowClass" style={{backgroundColor: 'red'}}>
  Child content
</Row>
<Row className="RowClass">Child content</Row>
<Row>Child content</Row>

3. Fetch the props

export default ({className, style, children}) => {
....
}

We have three properties — className, style and children.

1. className: Contains all class styles from parent.
2. style: Contains all inline styles from parent.
3. children: This prop is containing everything we put between the tags:

<Row>Child content</Row>

4. Build <Row> and <Column>

<div 
  className={className}
  style={{ …style, display: 'flex', flexDirection: 'row' }}
>
  {children}
</div>

1. className: The div gets all its classes from its parents props className.
2. style: The div gets all inline styles from its parents props styles and adds display and flexDirection on top.
   The reason to use style first and then the additions, is that we don’t want anyone to break the display or flexDirection. If we put style at the end, you may put another kind of display (like inline, block or none) and component won’t work properly.
   The spread (i.e …style) is used to include all objects from the parent style. The prop style is an object and not CSS, therefor we need the spread.
3. children: This prop is containing everything we put between the parent tags. In this case just a short text “Children content”. Children is a pre-defined prop-name which means that it must be named children to be used as a child.

Now we can add on some classes and inline styles (if we want to):

<Row className="RowClass" style={{backgroundColor: 'red'}}>
   Child content
</Row>

Done!