fbgrid-spec-react v0.4.1

fbgrid-spec-react

React component to generate flexbox grid via an Object, JSON or YAML specification

A simple grid example:

import React from 'react';
import FlexBoxGrid from 'fbgrid-spec-react';

const cellStyle = {
  borderStyle: "solid",
  borderWidth: "0.01em",
  margin: "0.1em",
  textAlign: "center",
  paddingLeft: "0.1em",
  paddingRight: "0.1em"
};
const CellGrowStyle = Object.assign({ flexGrow: 1 }, cellStyle);

const spec = {
  style: { flexDirection: 'column' },
  cells: [
    {
      style: cellStyle,
      component: {
        name: 'MyComponent',
        options: { text: 'MyComponent 1' }
      }
    },{
      style: cellStyle,
      component: {
        name: 'MyComponent',
        options: { text: 'MyComponent 2' }
      }
    }
  ]
};

const MyComponent = props => (
  <p>{props.text}</p>
);

const componentsMap = {
  MyComponent
};

export default () => {
  return (
    <FlexBoxGrid
      spec={spec}
      componentsMap={componentsMap}
    />
  );
};

The code above create this grid:

Other example with a complex grid:

import React from 'react';
import FlexBoxGrid from 'fbgrid-spec-react';

const cellStyle = {
  borderStyle: "solid",
  borderWidth: "0.01em",
  margin: "0.1em",
  textAlign: "center",
  paddingLeft: "0.1em",
  paddingRight: "0.1em"
};
const CellGrowStyle = Object.assign({ flexGrow: 1 }, cellStyle);

const spec = {
  style: {
    flexDirection: "column"
  },
  cells: [
    {
      subgrid: {
        cells: [
          {
            subgrid: {
              style: {
                flexDirection: "column",
                width: "10em",
              },
              cells: [
                {
                  style: cellStyle,
                  component: {
                    name: "MyComponent",
                    options: {
                      text: "My Component 1"
                    }
                  }
                },
                {
                  style: cellStyle,
                  component: {
                    name: "MyComponent",
                    options: {
                      text: "My Component 2"
                    }
                  }
                },
                {
                  style: cellStyle,
                  component: {
                    name: "MyComponent",
                    options: {
                      text: "My Component 3"
                    }
                  }
                }
              ]
            }
          },
          {
            style: CellGrowStyle,
            component: {
              name: "MyComponent",
              options: {
                text: "My Component 4"
              }
            }
          }
        ]
      }
    }
  ]
};

const MyComponent = props => (
  <p>{props.text}</p>
);

const componentsMap = {
  MyComponent
};

export default () => {
  return (
    <FlexBoxGrid
      spec={spec}
      componentsMap={componentsMap}
    />
  );
};

The code above create this grid: