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
import React from 'react'; import ReactDOM from 'react-dom'; import { Grid, Row, Cell } from 'react-inline-grid'; const Layout = React.createClass({ render() { return ( <Grid> <Row is="center"> <Cell is="3 tablet-4 phone-4"><div>content_a</div></Cell> <Cell is="3 tablet-4 phone-4"><div>content_b</div></Cell> </Row> </Grid> ); } }); ReactDOM.render(<Layout />, document.body);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:
startcenterendaroundbetween
<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>topmiddlebottomstretch
<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.
