React-emotion-grid NPM

react-emotion-grid

Installation

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

Demo

https://code.swiftcarrot.com/react-emotion-grid

Basic Usage

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

const Layout = () => (
  <Container>
    <Row>
      <Col />
      <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 emotion-theming

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

export const Container = withTheme(ReactContainer);
export const Row = withTheme(ReactRow);
export const Col = withTheme(ReactCol);

// app.js
import { ThemeProvider } from 'emotion-theming';
import { Container, Row, Col } from './grid';

const theme = {
  gridBreakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 },
  containerMaxWidths: { sm: 540, md: 720, lg: 960, xl: 1140 },
  gridColumns: 12,
  gridGutterWidth: 30
};

const App = () => (
  <ThemeProvider theme={theme}>
    <Container>
      <Row>
        <Col />
        <Col />
      </Row>
    </Container>
  </ThemeProvider>
);

with props

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

const theme = {
  gridBreakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 },
  containerMaxWidths: { sm: 540, md: 720, lg: 960, xl: 1140 },
  gridColumns: 12,
  gridGutterWidth: 30
};

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

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

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