Popularity
2.4
Growing
Activity
0.0
Stable
170
6
7

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Layout     Redux     React     React-component     Reactjs     Grid     Inline     Style     Flux     Predictable    
Latest version: v0.5.3

react-inline-grid alternatives and similar libraries

Based on the "UI Layout" category

Do you think we are missing an alternative of react-inline-grid or a related project?

Add another 'UI Layout' Library

README

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.