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

$3

``
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.

$3

`JSX
import React from 'react'

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

const App = props =>


Hello, world!


`

$3

The 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

$3

##### 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.

$3

##### 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.

$3

The grid use same defaults than flexboxgrid.css.

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

`JSX
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 =>



Hello, world!



`

Use with Emotion

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

Related projects

- styled-components
- hedron

License

MIT