React-grid NPM

react-grid

React grid component

Installation

npm install react-grid --save
yarn add react-grid

Demo

https://swiftcarrot.dev/react-grid

Basic Usage

import React from 'react';
import { Container, Row, Col } from 'react-grid';

function App() {
  return (
    <Container>
      <Row>
        <Col />
        <Col />
      </Row>
    </Container>
  );
}

API

bootstrap css class	component
.container	`<Container/>`
.container-fluid	`<Container fluid/>`
.row	`<Row />`
.row.no-gutters	`<Row noGutters />`
.col	`<Col/> (<Col xs />)`
.col-sm	`<Col sm />`
.col-md-auto	`<Col md="auto" />`
.col-6	`<Col xs={6} />`
.col-md-6	`<Col md={6} />`
.col.order-12	`<Col order={{xs:12}} />`
.col-md-4.offset-md-4	`<Col md={4} order={{md:4}} />`

Container

<Container />
<Container fluid/>

Row

<Row />

Col

<Col />
<Col xs={1}/>
<Col offset={{ xs: 1 }}/>
<Col order={{ xs: 1 }}/>
<Col order={{ xs: 'first', md: 'last' }}/>

Customize

with props

// grid.js
import {
  Container as ReactContainer,
  Row as ReactRow,
  Col as ReactCol
} from 'react-grid';

const styles = {
  breakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 },
  containerMaxWidths: { sm: 540, md: 720, lg: 960, xl: 1140 },
  columns: 12,
  gutterWidth: 30
};

export const Container = props => <ReactContainer {...props} styles={styles} />;
export const Row = props => <ReactRow {...props} styles={styles} />;
export const Col = props => <ReactCol {...props} styles={styles} />;

// app.js
import { Container, Row, Col } from './grid';

const App = () => (
  <Container>
    <Row>
      <Col />
      <Col />
    </Row>
  </Container>
);

breakpoints

react-grid implments breakpoint functions similar to bootstrap grid:

mediaBreakpointUp
mediaBreakpointDown
mediaBreakpointBetween
mediaBreakpointOnly

/** @jsx jsx */
import { jsx, css } from '@emotion/core';
import { mediaBreakpointUp } from 'react-grid';

const App = () => (
  <div
    css={css`
      ${mediaBreakpointUp('sm')} {
        font-size: 12px;
      }
    `}
  />
);

// or

const App = () => (
  <div
    css={{
      [mediaBreakpointUp('sm')]: {
        fontSize: 12
      }
    }}
  />
);