react-inline-grid

Predictable flexbox based grid for React. 

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

Install

npm install react<span class="token operator">-</span>inline<span class="token operator">-</span>grid <span class="token operator">--</span>save
JavaScript

API

Sample Usage

<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Grid<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Cell <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-inline-grid'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Layout <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
JavaScript
content_a
JavaScript
JavaScript
content_b
JavaScript

        
      
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span>
JavaScript

The library exports GridRow and Cell.

<Grid />

Grid wrap inner components with React Redux &lt;Provider&gt;.

Using Redux, Grid’s inner components can react to store update. Here Redux is used to handle MediaQueryList changes and update components style property:

<span class="token comment">// phone</span>
JavaScript

// tablet

// desktop

JavaScript

Grid exposes the property options allowing you to define custom grid settings.

options shape:

<span class="token punctuation">{</span>
  columns<span class="token punctuation">:</span> number     <span class="token comment">// default = 12     - Columns size for the bigger media.</span>
  gutter<span class="token punctuation">:</span> number      <span class="token comment">// default = 16     - Gutter size in pixel.</span>
  margin<span class="token punctuation">:</span> number      <span class="token comment">// default = 16     - Margin size in pixel.</span>
  deaf<span class="token punctuation">:</span> bool          <span class="token comment">// default = false  - Ignore MediaQueryList updates.</span>
  list<span class="token punctuation">:</span> <span class="token punctuation">[</span>             <span class="token comment">// default = [...]  - List of target media.</span>
    <span class="token punctuation">{</span> 
      name<span class="token punctuation">:</span> string    <span class="token comment">// required                     - Media name.</span>
      query<span class="token punctuation">:</span> string   <span class="token comment">// required                     - Media query to test.</span>
      gutter<span class="token punctuation">:</span> number  <span class="token comment">// default = options -&gt; gutter  - Media gutter size in pixel.</span>
      margin<span class="token punctuation">:</span> number  <span class="token comment">// default = options -&gt; margin  - Media margin size in pixel.</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
JavaScript

If options is not provided, or invalid, it will be fixed to apply values inspired by Google Material Design Lite grid layout:

<span class="token comment">// options -&gt; list</span>
<span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'phone'</span><span class="token punctuation">,</span>
    gutter<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
    margin<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
    columns<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
    query<span class="token punctuation">:</span> <span class="token string">'(max-width: 479px)'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'tablet'</span><span class="token punctuation">,</span>
    gutter<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
    margin<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
    columns<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
    query<span class="token punctuation">:</span> <span class="token string">'(min-width: 480px) and (max-width: 839px)'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'desktop'</span><span class="token punctuation">,</span>
    gutter<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
    margin<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
    columns<span class="token punctuation">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
    query<span class="token punctuation">:</span> <span class="token string">'(min-width: 840px)'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
JavaScript

If no media match the queries, Grid will define the first options -&gt; list -&gt; value as default current media in order to match the “popular” mobile first approch.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares