emotion-react-flexbox-grid v1.0.1

react-emotion-flexboxgrid

Warning

This is a fork of react-emotion-flexboxgrid, which is a fork of react-styled-flexboxgrid

Both packages appear to be unmaintained and have a load of emotion warning messages, however, this lib is wired deeply into our codebase.

In an attempt to reduce regressions and extra work, this has some fixes for emotion errors, but 95% or so is unchanged.

By all means request changes, but since it's used in our app I can't guarentee we can make those changes.

...

Set of React components that implement flexboxgrid.css but with 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 emotion-react-flexbox-grid

emotion-react-flexbox-grid depends on 2 peer dependencies:

• react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0
• prop-types@^15.0.0-0
• react-emotion@^9

You should install them in your project. It's also highly recommended to use emotion-theming

Note on version numbers; we aim to match our "Major" version number with that of emotion.

Basic

import React from 'react'

import {Grid, Col, Row} from 'emotion-react-flexbox-grid'

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 interger 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 emotion-theming. emotion-react-flexbox-grid will looks at the flexboxgrid property in the theme.

import React from 'react'

import { ThemeProvider } from 'emotion-theming'
import { Grid, Col, Row } from 'emotion-react-flexbox-grid'

const theme = {
  flexboxgrid: {
    // Defaults
    gridSize: 12, // rem
    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>

Related projects

• react-emotion-flexboxgrid
• react-styled-flexboxgrid
• emotion
• hedron

License

MIT