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: