You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React-Flexbox-Grid is a set of React components that implement [flexboxgrid.css](https://goo.gl/imrHBZ). It's built on top of some of the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6. The library harmoniously integrates with your Webpack workflow and it's easily customizable and very flexible.
7
+
`react-flexbox-grid` is a set of React components that implement [flexboxgrid.css](https://goo.gl/imrHBZ). It even has an optional support for [CSS Modules](https://github.com/webpack-contrib/css-loader#css-modules)with some extra configuration.
Although there are other ways to use React-Flexbox-Grid, the recommended way is to create a Webpack workflow with [Babel Loader](https://github.com/babel/babel-loader), [CSS Loader](https://github.com/webpack/css-loader) and [SASS Loader](https://github.com/jtangelder/sass-loader). A good starting point is [react-flexbox-grid-example](https://github.com/roylee0704/react-flexbox-grid-example), be sure to also checkout [webpack config](https://github.com/roylee0704/react-flexbox-grid-example/blob/master/webpack.config.js) in the example.
18
+
### Installation
19
+
20
+
`react-flexbox-grid` can be installed as an [npm package](https://www.npmjs.com/package/react-flexbox-grid):
21
+
22
+
```
23
+
npm install --save react-flexbox-grid
24
+
```
17
25
26
+
### Minimal configuration
18
27
28
+
The recommended way to use `react-flexbox-grid` is with a tool like [webpack](https://webpack.js.org/) or [Meteor](https://www.meteor.com/), make sure you set it up to support requiring CSS files. For example, the minimum required loader configuration for webpack would look like this:
19
29
20
-
### Basic webpack configuration
30
+
```js
31
+
{
32
+
test:/\.css$/,
33
+
loader:'style-loader!css-loader',
34
+
include:/flexboxgrid/
35
+
}
36
+
```
21
37
22
-
You must configure webpack to load flexboxgrid with [CSS Modules](https://github.com/webpack/css-loader#css-modules), otherwise components from react-flexbox-grid will just have [empty class names](https://github.com/roylee0704/react-flexbox-grid/issues/21).
38
+
`react-flexbox-grid` imports the styles from `flexboxgrid`, that's why we're configuring the loader for it.
23
39
24
-
To do so, first add the loaders required as `devDependencies`:
40
+
### CSS Modules
41
+
42
+
If you want to use CSS Modules (this is _mandatory_ for versions earlier than v1), webpack's [`css-loader`](https://github.com/webpack-contrib/css-loader) supports this by passing `modules` param in the loader configuration.
43
+
44
+
First, install `style-loader` and `css-loader` as development dependencies:
25
45
26
46
```
27
-
npm i -D npm style-loader css-loader
47
+
npm install --save-dev style-loader css-loader
28
48
```
29
49
30
-
Then configure the loaders:
50
+
Next, add a loader for `flexboxgrid` with CSS Modules enabled:
31
51
32
52
```js
33
53
{
34
54
test:/\.css$/,
35
-
loader:'style!css?modules',
36
-
include:/flexboxgrid/,
55
+
loader:'style-loader!css-loader?modules',
56
+
include:/flexboxgrid/
37
57
}
38
58
```
39
59
40
-
If you have another loader which affects `flexboxgrid`, exclude it from that loader. In this case, also using `postcss` loader:
60
+
Make sure you don't have another CSS loader which also affects `flexboxgrid`. In case you do, exclude `flexboxgrid`, for example:
41
61
42
62
```js
43
63
{
44
64
test:/\.css$/,
45
-
loader:'style!css!postcss',
65
+
loader:'style-loader!css-loader!postcss-loader',
46
66
include:path.join(__dirname, 'node_modules'), // oops, this also includes flexboxgrid
47
-
exclude:/flexboxgrid/,// so we have to exclude it
67
+
exclude:/flexboxgrid/// so we have to exclude it
48
68
}
49
69
```
50
70
51
-
Because webpack stacks loaders together, it doesn't override them.
71
+
Otherwise you would end up with an [obscure error](https://github.com/roylee0704/react-flexbox-grid/issues/94#issuecomment-282825720) because webpack stacks loaders together, it doesn't override them.
72
+
73
+
### Isomorphic support
74
+
75
+
See [this comment](https://github.com/roylee0704/react-flexbox-grid/issues/28#issuecomment-198758253).
76
+
77
+
78
+
### Not using a bundler?
79
+
80
+
If you want to use `react-flexbox-grid` the old-fashioned way, you must generate a build with all the CSS and JavaScript and include it in your `index.html`. The components will then be exposed in the `window` object.
81
+
82
+
83
+
Usage
84
+
-----
85
+
86
+
Now you can import and use the components:
87
+
88
+
```jsx
89
+
importReactfrom'react';
90
+
import { Grid, Row, Col } from'react-flexbox-grid';
91
+
92
+
classAppextendsReact.Component {
93
+
render() {
94
+
return (
95
+
<Grid fluid>
96
+
<Row>
97
+
<Col xs={6} md={3}>
98
+
Hello, world!
99
+
</Col>
100
+
</Row>
101
+
</Grid>
102
+
);
103
+
}
104
+
}
105
+
```
52
106
53
-
**Note:** If you need isomorphic support see https://github.com/roylee0704/react-flexbox-grid/issues/28#issuecomment-198758253.
54
107
55
108
Example
56
109
-------
57
-
Looking for example to use `react-flexbox-grid`? Head over to [react-flexbox-grid-example](https://github.com/roylee0704/react-flexbox-grid-example).
110
+
Looking for a complete example? Head over to [react-flexbox-grid-example](https://github.com/roylee0704/react-flexbox-grid-example).
58
111
59
112
60
113
Advanced composition
61
114
-------
62
-
Functions for generating Row and Column classNames are exported for use in other components.
63
115
64
-
For example, suppose you're using a third party component that accepts a className and you would like it to be rendered as Column. You could do so by extracting the column sizing props that `MyComponent` uses and then pass the generated className on to `SomeComponent`
116
+
We also export functions for generating Row and Column class names for use in other components.
65
117
118
+
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`
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.
112
-
113
-
114
-
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.
115
-
116
-
117
-
Code snippets
118
-
------------
119
-
```jsx
120
-
importReactfrom'react';
121
-
import { Grid, Row, Col } from'react-flexbox-grid';
0 commit comments