react-styled-flexboxgrid

by LoicMahieu

Grid system based on styled-components and flexbox for React

493 Stars 54 Forks Last release: over 3 years ago (v2.0.1) MIT License 189 Commits 21 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-styled-flexboxgrid

npm version Build Status NPM Status js-standard-style

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: -
[email protected]^0.14.0 || ^15.0.0-0 || ^16.0.0-0
-
[email protected]^15.0.0-0
-
[email protected]

You should install them in your project.

Basic

import React from 'react'

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

const App = props => Hello, world!

Grid

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

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

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 => Hello, world!

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'

Related projects

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.