Package Exports

react-styled-flexboxgrid
react-styled-flexboxgrid/dist/styled-flexboxgrid.es.js
react-styled-flexboxgrid/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-styled-flexboxgrid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-styled-flexboxgrid

Set of React components that implement flexboxgrid.css but with styled-components/emotion. Furthermore, it allows to customize grid configuration like gutter width...

Highly inspired by the excellent react-flexbox-grid which the API is nearly the same than this module.

Demo

Usage

Installation

npm i -S react-styled-flexboxgrid

react-styled-flexboxgrid depends on 2 peer dependencies:

react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0
prop-types@^15.0.0-0
styled-components@2

You should install them in your project.

Basic

import React from 'react'

import {Grid, Col, Row} from 'react-styled-flexboxgrid'

const App = props =>
  <Grid>
    <Row>
      <Col xs={6} md={3}>Hello, world!</Col>
    </Row>
  </Grid>

Grid

The <Grid> component is optional and can help to wrap children in a fixed/fluid container. Use the configuration container for fixed width value.

Props

fluid (Boolean): Create a responsive fixed width container or a full width container, spanning the entire width of your viewport. Default: false

Row

Props

reverse (Boolean): Use flex-direction: row-reverse. Default: false
start
center
end
top
middle
bottom
around
between
first
last (String(xs|sm|md|lg): Align elements to the start or end of row as well as the top, bottom, or center of a column.

Col

Props

reverse (Boolean): Use flex-direction: column-reverse. Default: false
xs
sm
md
lg (Boolean|Integer):
- When true, enable auto sizing column.
- When false, hide colomn for the breakpoint.
- When integer value, it specify the column size on the grid. (1 to 12)
xsOffset
smOffset
mdOffset
lgOffset (Integer): Offset the column.

Configuration

The grid use same defaults than flexboxgrid.css.

You can customize values using <ThemeProvider> component from styled-components. react-styled-flexboxgrid will looks at the flexboxgrid property in the theme.

import React from 'react'

import {ThemeProvider} from 'styled-components'
import {Grid, Col, Row} from 'react-styled-flexboxgrid'

const theme = {
  flexboxgrid: {
    // Defaults
    gridSize: 12, // columns
    gutterWidth: 1, // rem
    outerMargin: 2, // rem
    mediaQuery: 'only screen',
    container: {
      sm: 46, // rem
      md: 61, // rem
      lg: 76  // rem
    },
    breakpoints: {
      xs: 0,  // em
      sm: 48, // em
      md: 64, // em
      lg: 75  // em
    }
  }
}

const App = props =>
  <ThemeProvider theme={theme}>
    <Grid>
      <Row>
        <Col xs={6} md={3}>Hello, world!</Col>
      </Row>
    </Grid>
  </ThemeProvider>

Use with Emotion

To use react-styled-flexboxgrid with emotion, import from 'react-styled-flexboxgrid/emotion':

import { Grid, Col, Row } from 'react-styled-flexboxgrid/emotion'

License

MIT