css-grid-components v1.0.16
CSS Grid Components
Getting Started
Installation
yarn add css-grid-components
Usage
import React from 'react';
const { Grid, GridElement } = require('css-grid-components');
// or
// import { Grid, GridElement } from 'css-grid-components';
class myGrid extends React.Component {
render() {
return (
<div style={{
height: '800px',
width: '800px',
padding: '5px'
}}>
<Grid>
<GridElement gridKey={0}>
Hello
</GridElement>
<GridElement gridKey={1}>
There!
</GridElement>
</Grid>
</div>
);
}
}
Result
// Split up the first element
return (
<div style={{
height: '800px',
width: '800px',
padding: '5px'
}}>
<Grid>
<GridElement gridKey={0}>
<GridElement gridKey={2}>
Let's split
</GridElement>
<GridElement gridKey={3}>
this one up
</GridElement>
</GridElement>
<GridElement gridKey={1}>
There!
</GridElement>
</Grid>
</div>
);
Result
// Set the parent element to 'columns' to change children orientation
return (
<div style={{
height: '800px',
width: '800px',
padding: '5px'
}}>
<Grid>
<GridElement gridKey={0} columns>
<GridElement gridKey={2}>
Let's split
</GridElement>
<GridElement gridKey={3}>
this one up
</GridElement>
</GridElement>
<GridElement gridKey={1}>
There!
</GridElement>
</Grid>
</div>
);
Result
// Can create grids within grids
return (
<div style={{
height: '800px',
width: '800px',
padding: '5px'
}}>
<Grid>
<GridElement gridKey={0} columns>
<GridElement gridKey={2}>
Let's split
</GridElement>
<GridElement gridKey={3}>
<GridElement gridKey={4}>
Let's split
</GridElement>
<GridElement gridKey={5} columns>
<GridElement gridKey={6}>
Let's split
</GridElement>
<GridElement gridKey={7}>
<GridElement gridKey={8}>
Let's split
</GridElement>
<GridElement gridKey={9}>
this one up
</GridElement>
</GridElement>
</GridElement>
</GridElement>
</GridElement>
<GridElement gridKey={1}>
There!
</GridElement>
</Grid>
</div>
);
Result
// Set height and width of columns/rows
return (
<div style={{
height: '800px',
width: '800px',
padding: '5px'
}}>
<Grid>
<GridElement gridKey={0} columns>
<GridElement gridKey={2}>
Let's split
</GridElement>
<GridElement gridKey={3}>
<GridElement gridKey={4}>
Let's split
</GridElement>
<GridElement height={'300px'} gridKey={5} columns>
<GridElement gridKey={6}>
Let's split
</GridElement>
<GridElement gridKey={7}>
<GridElement height={'25px'} gridKey={8}>
Let's split
</GridElement>
<GridElement gridKey={9}>
this one up
</GridElement>
</GridElement>
</GridElement>
</GridElement>
</GridElement>
<GridElement gridKey={1}>
There!
</GridElement>
</Grid>
</div>
Result
PropTypes
Grid
None. Grid is used as a wrapper for React's Context API. It passes a 'gridStore' with information pertaining to all children (and children of children, and so on). With a complete picture of the overall node tree, it can determine the grid positions and sizes of each child, storing individual child information in the gridStore, which children components access and set their relative grid positions (and any styles required to fit them alongside other children, some of which might have declared dimensions).
New grid elements can be created with minimal work required from the Grid. Instead of frequently checking the tree for new child nodes, it passes a callback to Consumers to call when they mount. The callback provides any information relevant to the Grid to update the gridStore.
GridElement
gridKey
Any - Required. Should be unique to each GridElement, but in theory can be used to reuse styling/position for multiple GridElements, since GridElements use their gridKey to obtain information about their position/dimensions. Recommended to stick to strictly unique schema.
columns
Boolean = false - Aligns children as columns instead of defaulting to rows.
width
String - Anything accepted as a unit for the css property grid-template-columns
('fr', 'px', etc)
height
String - Anything accepted as a unit for the css property grid-template-rows
('fr', 'px', etc)
centered
Boolean = false - Only accepted by leaf node (no children). Centers inner content of GridElement
outlined
Boolean = false - Outline grid elements with a border (sets margin to -1px so that borders do not stack on top of each other). Recommended for testing only