A set of React components implementing flexboxgrid with the power of CSS Modules
npm install react-flexbox-grid-for-v15.2js
{
test: /\.css$/,
loader: 'style!css?modules',
include: /flexboxgrid/,
}
`
If you have another loader which affects flexboxgrid, exclude it from that loader:
`js
{
test: /\.css$/,
loader: 'style!css!postcss',
include: path.join(__dirname, 'node_modules'), // this also includes flexboxgrid
exclude: /flexboxgrid/, // so we are excluding it
}
`
Because webpack stacks loaders together, it doesn't override them.
Example
-------
Looking for example to use react-flexbox-grid? Head over to react-flexbox-grid-example.
Installation
------------
React-Flexbox-Grid can be installed as an npm package;
`
//dependencies
npm install classnames
npm install flexboxgrid
npm install react-flexbox-grid
`
Once you have the workflow ready, you can just require and use the components:
`jsx
import React from react;
import { Grid } from react-flexbox-grid/lib/index;
React.render( , document.querySelector('#main'));
`
The previous code creates a React container component based on React Flexbox Grid container. It's important to notice that requiring a module from the exposed root of the package will import the SASS of the component.
I encourage you to work with webpack but if you want to use React Flexbox Grid in an old fashioned way, you must generate a build with all the css and javascript and include it in your index.html. Then you can use the components exposed in the window object.
Code snippets
------------
`jsx
const {Grid, Row, Col} = require('react-flexbox-grid');
const App = React.createClass({
render() {
return (
Hello, world!
);
}
});
``