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.
https://roylee0704.github.io/react-flexbox-grid/
react-flexbox-grid
can be installed as an npm package:
npm install --save react-flexbox-grid
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.
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.
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
.
Use the pre-bundled build located in the dist directory. It contains a single umd js distributable and built css file.
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>
);
}
}
For the time being always use fluid
for <Grid>
to prevent horizontal overflow issues.
Looking for a complete example? Head over to react-flexbox-grid-example.
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={...} />
Roy Lee | Helder Santana | Matija Marohnić |
MIT