React Inline Grid
A predictable gird layout based on flexbox for React applications using inline styles.
Install
npm install react-inline-grid --save
API
Sample Usage
;;; const Layout = React; ReactDOM;
The library exports Grid
, Row
and Cell
.
<Grid />
Grid wrap inner components with React Redux <Provider>
.
Using Redux, Grid's inner components can react to store update. Here Redux is used to handle MediaQueryList changes and update components style
property:
// phone<div style="...; width: calc(100% - 16px);"><div> // tablet<div style="...; width: calc(50% - 16px);"><div> // desktop<div style="...; width: calc(25% - 16px);"><div>
Grid exposes the property options
allowing you to define custom grid settings.
options
shape:
columns: number // default = 12 - Columns size for the bigger media. gutter: number // default = 16 - Gutter size in pixel. margin: number // default = 16 - Margin size in pixel. deaf: bool // default = false - Ignore MediaQueryList updates. list: // default = [...] - List of target media. name: string // required - Media name. query: string // required - Media query to test. gutter: number // default = options -> gutter - Media gutter size in pixel. margin: number // default = options -> margin - Media margin size in pixel.
If options
is not provided, or invalid, it will be fixed to apply values inspired by Google Material Design Lite grid layout:
// options -> list name: 'phone' gutter: 16 margin: 16 columns: 4 query: '(max-width: 479px)' name: 'tablet' gutter: 16 margin: 16 columns: 8 query: '(min-width: 480px) and (max-width: 839px)' name: 'desktop' gutter: 16 margin: 16 columns: 12 query: '(min-width: 840px)'
If no media match the queries, Grid will define the first options -> list -> value
as default current media in order to match the "popular" mobile first approch.
<Row />
Exposes the property is
(string) to update the following default style object:
display: 'flex' flexFlow: 'row wrap' alignItems: 'stretch'
is
specify the justify-content
style property as:
start
center
end
around
between
<Row is="center phone-end"> <Cell> <div>Content</div> </Cell></Row> // not phone<div style="...; justify-content:center;"> <Cell> <div>Content</div> </Cell></div> // phone<div style="...; justify-content:flex-end;"> <Cell> <div>Content</div> </Cell></div>
<Cell />
Exposes the property is
(string) to update the following default style object:
boxSizing: 'border-box'
is
specify cell size and align-self
style property as:
<value>
<media name?>-<value>
<media name?>-offset-<value>
top
middle
bottom
stretch
<Row> <Cell is="middle 4 tablet-2 offset-1"> <div>Content</div> </Cell></Row> // desktop<Row> <div style="...; width:calc(33.33...% - 16px);align-self:center;margin-left:calc(8.33...% - 8px);"> <div>Content</div> </div></Row> // tablet<Row> <div style="...; width:calc(12.5% - 16px);align-self:center;margin-left:calc(25% - 8px);"> <div>Content</div> </div></Row> // phone<Row> <div style="...; width:calc(25% - 16px);align-self:center;margin-left:calc(100% - 8px);"> <div>Content</div> </div></Row>
For both <Row />
and <Cell />
, is
property ask for an "already defined" values, the last one is used:
<Cell is="3 2 1"> <div>Content</div></Cell> // will be defined as <Cell is="1"> <div>Content</div></Cell>
Examples
The gh-pages page of this repository use some patterns as examples, but feel free to play and test your layouts using the examples
folder.
Run the gh-pages example:
git clone https://github.com/broucz/react-inline-grid.git
cd react-inline-grid
npm install
cd examples/react-transform-boilerplate
npm install
npm start
open http://localhost:3000/
Thanks
- Redux I learned a lot from package evolution, author @gaearon, contributors, and related discussions.
- React for the fun.
- React Redux to make it easier.