• Stars
    star
    170
  • Rank 223,357 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Predictable flexbox based grid for React.

React Inline Grid

A predictable gird layout based on flexbox for React applications using inline styles.

npm version

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:

  • 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.