├── .gitignore
├── README.md
├── example
├── index.css
├── index.html
├── index.js
└── webpack.config.js
├── lib
└── index.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Flexgrid
2 |
3 | [Flexbox Grid][] reimagined as a set of React components.
4 |
5 | Installation:
6 |
7 | % npm install react-flexgrid
8 |
9 | Usage:
10 |
11 | var {Container, Block} = require('react-flexgrid')
12 |
13 | React Flexgrid automatically assigns equal width for any number of blocks inside
14 | the container:
15 |
16 |
17 | 1
18 | 2
19 |
20 |
21 |
22 | 1
23 | 2
24 | 3
25 |
26 |
27 | You can specify block widths with fractions:
28 |
29 |
30 | 1
31 | 2
32 | 3
33 |
34 |
35 | Fix some block's width with percentage:
36 |
37 |
38 | 1
39 | 2
40 | 3
41 |
42 |
43 | Or even specify block width in pixels:
44 |
45 |
46 | 1
47 | 2
48 | 3
49 |
50 |
51 | [Flexbox Grid]: http://flexboxgrid.com/
52 |
--------------------------------------------------------------------------------
/example/index.css:
--------------------------------------------------------------------------------
1 | @import '~normalize.css/normalize.css';
2 |
3 | body {
4 | font-family: 'Fira Sans', sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jsx React.DOM
3 | */
4 | 'use strict';
5 |
6 | require('./index.css');
7 |
8 | var React = require('react');
9 | var ReactStyle = require('react-style');
10 | var ReactFlexgrid = require('react-flexgrid');
11 |
12 | function theme(BaseComponent, styles) {
13 | return React.createClass({
14 | displayName: BaseComponent.type.displayName,
15 | render() {
16 | return this.transferPropsTo(
17 |
18 | {this.props.children}
19 |
20 | );
21 | }
22 | });
23 | }
24 |
25 | var Container = ReactFlexgrid.Container;
26 |
27 | var Block = theme(ReactFlexgrid.Block, ReactStyle({
28 | fontFamily: '"Menlo", "Monaco", monospace',
29 | background: '#000',
30 | color: '#fff',
31 | padding: '0.5rem',
32 | marginBottom: '1rem',
33 | fontSize: '80%'
34 | }));
35 |
36 | var ReactFlexgridExample = React.createClass({
37 |
38 | styles: ReactStyle({
39 | width: '80%',
40 | padding: '1rem',
41 | fontSize: '100%'
42 | }),
43 |
44 | render() {
45 | return (
46 |
47 |
React Flexgrid
48 | Let the grid figure out the widths of blocks automatically
49 |
50 | {``}
51 | {``}
52 |
53 |
54 | {``}
55 | {``}
56 | {``}
57 |
58 | Specify block width with the fractions of total width
59 |
60 | {``}
61 | {``}
62 | {``}
63 |
64 |
65 | {``}
66 | {``}
67 | {``}
68 |
69 | You can also fix some block's width with percentage
70 |
71 | {``}
72 | {``}
73 | {``}
74 |
75 | Or even specify block width in pixels
76 |
77 | {``}
78 | {``}
79 | {``}
80 |
81 |
82 | );
83 | }
84 | });
85 |
86 | ReactStyle.inject();
87 | React.renderComponent(
88 | ,
89 | document.getElementById('main'));
90 |
--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 |
3 | module.exports = {
4 | entry: [
5 | 'webpack-dev-server/client?http://localhost:8080',
6 | 'webpack/hot/dev-server',
7 | './index'
8 | ],
9 | devtool: 'eval',
10 | output: {
11 | filename: 'bundle.js',
12 | path: __dirname + '/build',
13 | publicPath: '/build/'
14 | },
15 | resolve: {
16 | alias: {
17 | 'react-flexgrid$': require.resolve('../lib/index')
18 | }
19 | },
20 | module: {
21 | loaders: [
22 | {
23 | test: /\.js$/,
24 | loaders: [
25 | 'react-hot',
26 | 'jsx-loader?harmony'
27 | ]
28 | },
29 | {
30 | test: /\.css$/,
31 | loaders: [
32 | 'style-loader',
33 | 'css-loader'
34 | ]
35 | }
36 | ]
37 | },
38 | plugins: [
39 | new webpack.HotModuleReplacementPlugin(),
40 | new webpack.NoErrorsPlugin()
41 | ]
42 | };
43 |
--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jsx React.DOM
3 | */
4 | 'use strict';
5 |
6 | var React = require('react');
7 | var ReactStyle = require('react-style');
8 |
9 | var Container = React.createClass({
10 |
11 | render() {
12 | var styles = [].concat(this.style, this.props.styles);
13 | return (
14 |
15 | {this.props.children}
16 |
17 | );
18 | },
19 |
20 | style: ReactStyle({
21 | boxSizing: 'border-box',
22 | display: 'flex',
23 | flexDirection: 'row',
24 | flexWrap: 'wrap',
25 | marginRight: '-0.5rem',
26 | marginLeft: '-0.5rem'
27 | })
28 | });
29 |
30 | var Block = React.createClass({
31 |
32 | render() {
33 | var width;
34 | if (typeof this.props.width === 'number') {
35 | width = ReactStyle({flex: this.props.width});
36 | } else if (this.props.width) {
37 | width = ReactStyle({
38 | flexBasis: this.props.width,
39 | maxWidth: this.props.width
40 | });
41 | } else {
42 | width = ReactStyle({flex: 1});
43 | }
44 | return (
45 |
46 |
47 | {this.props.children}
48 |
49 |