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
      }
    }}
  />
);

License

MIT