Neptune's Potato Monsters

    react-inline-grid-15

    0.5.4 • Public • Published

    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.

    Install

    npm i react-inline-grid-15

    DownloadsWeekly Downloads

    2

    Version

    0.5.4

    License

    MIT

    Last publish

    Collaborators

    • fa7ad