react-flexbox-grid
react-flexbox-grid
is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.
http://roylee0704.github.io/react-flexbox-grid/
Setup
Installation
react-flexbox-grid
can be installed as an npm package:
npm install --save react-flexbox-grid
Minimal configuration
The recommended way to use react-flexbox-grid
is with a tool like webpack or Meteor, make sure you set it up to support requiring CSS files. For example, the minimum required loader configuration for webpack would look like this:
test: /\.css$/ loader: 'style-loader!css-loader' include: /flexboxgrid/
react-flexbox-grid
imports the styles from flexboxgrid
, that's why we're configuring the loader for it.
CSS Modules
If you want to use CSS Modules (this is mandatory for versions earlier than v1), webpack's css-loader
supports this by passing modules
param in the loader configuration.
First, install style-loader
and css-loader
as development dependencies:
npm install --save-dev style-loader css-loader
Next, add a loader for flexboxgrid
with CSS Modules enabled:
test: /\.css$/ loader: 'style-loader!css-loader?modules' include: /flexboxgrid/
Make sure you don't have another CSS loader which also affects flexboxgrid
. In case you do, exclude flexboxgrid
, for example:
test: /\.css$/ loader: 'style-loader!css-loader!postcss-loader' include: path // oops, this also includes flexboxgrid exclude: /flexboxgrid/ // so we have to exclude it
Otherwise you would end up with an obscure error because webpack stacks loaders together, it doesn't override them.
Isomorphic support
Try: this comment.
If this doesn't work for you, use the build located in the dist directory. This build removes all .css
imports and extracts the relevant css into react-flexbox-grid/dist/react-flexbox-grid.css
.
Not using a bundler?
Use the pre-bundled build located in the dist directory. It contains a single umd js distributable and built css file.
Usage
Now you can import and use the components:
import React from 'react';import Grid Row Col from 'react-flexbox-grid'; Component { return <Grid > <Row> <Col = => Hello world! </Col> </Row> </Grid> ; }
Gotcha
For the time being always use fluid
for <Grid>
to prevent horizontal overflow issues.
Example
Looking for a complete example? Head over to react-flexbox-grid-example.
Advanced composition
We also export functions for generating Row and Column class names for use in other components.
For example, suppose you're using a third party component that accepts className
and you would like it to be rendered as Col
. You could do so by extracting the column sizing props that MyComponent
uses and then pass the generated className on to SomeComponent
import React from 'react';import Row Col getRowProps getColumnProps from 'react-flexbox-grid';// a component that accepts a classNameimport SomeComponent from 'some-package'; { const colProps = ; const rowProps = ; return <form => <SomeComponent = /> <input = = /> </form> ;} MyComponentpropTypes = Object; // Re-use existing Row and Col propType validations // Can now be rendered as: <MyComponent end="sm" sm={8} value="my input value" onChange={...} />
Contributors
Roy Lee | Helder Santana | Matija Marohnić |
License
MIT