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.join(__dirname, 'node_modules'), // 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'; class App extends React.Component { render() { return ( <Grid fluid> <Row> <Col xs={6} md={3}> 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 className import SomeComponent from 'some-package'; export default function MyComponent(props) { const colProps = getColumnProps(props); const rowProps = getRowProps(props); return ( <form className={rowProps.className}> <SomeComponent classname={colProps.className} /> <input value={props.value} onChange={props.onChange} /> </form> ); } MyComponent.propTypes = Object.assign({ onChange: React.PropTypes.func.isRequired, value: React.PropTypes.string.isRequired, }, Col.propTypes, Row.propTypes); // 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