06.layout-component.md

Layout component

We can extend the idea of Base components to create Layout components.

Example

const Grid = (props) => (
  <Box {...props}
    display='inline-block'
    verticalAlign='top'
    px={2}/>
);

const Half = (props) => (
  <Grid {...props}
    width={1 / 2}/>
);

const Third = (props) => (
  <Grid {...props}
    width={1 / 3}/>
);

const Quarter = (props) => (
  <Grid {...props}
    width={1 / 4}/>
);

const Flex = (props) => (
  <Box {...props}
    display='flex'/>
);

const FlexAuto = (props) => (
  <Box {...props}
    flex='1 1 auto'/>
);

Usage

const Layout = () => (
  <div>
    <div>
      <Half>Half width column</Half>
      <Half>Half width column</Half>
    </div>
    <div>
      <Third>Third width column</Third>
      <Third>Third width column</Third>
      <Third>Third width column</Third>
    </div>
    <div>
      <Quarter>Quarter width column</Quarter>
      <Quarter>Quarter width column</Quarter>
      <Quarter>Quarter width column</Quarter>
      <Quarter>Quarter width column</Quarter>
    </div>
  </div>
);

Related links:

• Github: React Layout components
• Leveling Up With React: Container Components
• [Container Components and Stateless Functional Components in React](Leveling Up With React: Container Components)