├── .gitignore ├── examples ├── index.css ├── index.html ├── index.jsx ├── HelloWorld.jsx └── react-flexbox.js ├── .babelrc ├── .eslintrc ├── webpack.config.js ├── package.json ├── src └── index.jsx ├── README.md └── lib └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Mac OSX Files 2 | .DS_Store 3 | 4 | # General Files 5 | node_modules 6 | npm-debug.log 7 | yarn.lock 8 | examples/dist 9 | dist 10 | -------------------------------------------------------------------------------- /examples/index.css: -------------------------------------------------------------------------------- 1 | .red { 2 | background: red; 3 | } 4 | 5 | .green { 6 | background: green; 7 | } 8 | 9 | .border { 10 | border: 1px solid black; 11 | } 12 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-0", 5 | "react" 6 | ], 7 | "plugins": [ 8 | "react-hot-loader/babel", 9 | "transform-react-remove-prop-types" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React Flexbox 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { AppContainer } from 'react-hot-loader'; 4 | 5 | import HelloWorld from './HelloWorld'; 6 | 7 | const render = (Component) => { 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('app')); 13 | }; 14 | 15 | render(HelloWorld); 16 | 17 | // Hot Module Replacement API 18 | if (module.hot) { 19 | module.hot.accept('./HelloWorld', () => { 20 | render(HelloWorld) 21 | }); 22 | } 23 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "mocha": true 7 | }, 8 | "rules": { 9 | "strict": 0, 10 | "no-var": true, 11 | "no-underscore-dangle": false, 12 | "quotes": [2, "single", "avoid-escape"], 13 | "new-cap": [1, { 14 | "capIsNewExceptions": ["Map", "List"] 15 | }], 16 | "react/display-name": 1, 17 | "react/jsx-quotes": 1, 18 | "react/jsx-no-undef": 1, 19 | "react/jsx-sort-props": 1, 20 | "react/jsx-uses-react": 1, 21 | "react/jsx-uses-vars": 1, 22 | "react/no-did-mount-set-state": 1, 23 | "react/no-did-update-set-state": 1, 24 | "react/no-multi-comp": 1, 25 | "react/no-unknown-property": 1, 26 | "react/prop-types": 1, 27 | "react/react-in-jsx-scope": 1, 28 | "react/self-closing-comp": 1, 29 | "react/wrap-multilines": 1 30 | }, 31 | "plugins": [ 32 | "react" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | const webpack = require('webpack') 3 | const dev = process.env.NODE_ENV !== 'production' 4 | 5 | module.exports = { 6 | devtool: 'eval', 7 | 8 | entry: dev ? ['react-hot-loader/patch', 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './'] : ['./'], 9 | 10 | output: dev ? { 11 | filename: 'bundle.js', 12 | publicPath: '/' 13 | } : { 14 | library: 'ReactFlexbox', 15 | libraryTarget: 'umd', 16 | }, 17 | 18 | externals: dev ? {} : { 19 | 'react': 'React', 20 | 'react-dom': 'ReactDOM', 21 | 'prop-types': 'PropTypes', 22 | }, 23 | 24 | devServer: { 25 | hot: true, 26 | contentBase: resolve(__dirname, 'examples'), 27 | publicPath: '/' 28 | }, 29 | 30 | resolve: { 31 | extensions: ['.js','.jsx'], 32 | modules: [ 33 | resolve(__dirname, "src"), 34 | "node_modules" 35 | ], 36 | }, 37 | 38 | module: { 39 | rules: [ 40 | { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader" }, 41 | ] 42 | }, 43 | 44 | plugins: dev ? [ 45 | new webpack.HotModuleReplacementPlugin(), 46 | new webpack.NamedModulesPlugin() 47 | ] : [ 48 | // new webpack.optimize.UglifyJsPlugin({ minimize: true }) 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /examples/HelloWorld.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import View from '../src' 4 | 5 | export default class HelloWorld extends Component { 6 | render() { 7 | return ( 8 | 9 | 10 | Twice the size of the others, the width is set without a unit. 11 | 100px 12 | other 1 13 | 14 | 50px 15 | 50px 16 | 17 | 18 | 19 | 20 | Left 21 | Left 22 | 23 | All the place in the world 24 | 25 | 26 | 27 | Green 28 | Red 29 | 30 | All the rest 31 | 32 | 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-flexbox", 3 | "version": "3.1.4", 4 | "description": "React flexbox implementation", 5 | "author": "Thomas Coopman @tcoopman", 6 | "main": "lib/index.js", 7 | "scripts": { 8 | "build": "npm run build:lib && npm run build:umd && npm run build:umd:min", 9 | "build:lib": "NODE_ENV=production babel src --out-dir lib", 10 | "build:umd": "NODE_ENV=production webpack src/index.jsx dist/react-flexbox.js", 11 | "build:umd:min": "NODE_ENV=production webpack -p src/index.jsx dist/react-flexbox.min.js", 12 | "prepublish": "npm run build", 13 | "examples": "NODE_ENV=development webpack-dev-server examples" 14 | }, 15 | "licenses": [ 16 | { 17 | "type": "MIT", 18 | "url": "http://www.opensource.org/licenses/mit-license.php" 19 | } 20 | ], 21 | "repository": { 22 | "type": "git", 23 | "url": "git@github.com:tcoopman/react-flexbox.git" 24 | }, 25 | "keywords": [ 26 | "react", 27 | "react-component", 28 | "flexbox" 29 | ], 30 | "engines": { 31 | "node": ">= 0.12", 32 | "iojs": ">= 3.0", 33 | "npm": ">= 2.1" 34 | }, 35 | "devDependencies": { 36 | "babel-cli": "^6.24.1", 37 | "babel-core": "^6.24.1", 38 | "babel-eslint": "^7.2.2", 39 | "babel-loader": "^6.4.1", 40 | "babel-plugin-transform-react-remove-prop-types": "^0.4.0", 41 | "babel-preset-es2015": "^6.24.0", 42 | "babel-preset-react": "^6.23.0", 43 | "babel-preset-react-hmre": "^1.1.1", 44 | "babel-preset-stage-0": "^6.22.0", 45 | "debug": "^2.2.0", 46 | "eslint": "^3.19.0", 47 | "eslint-plugin-react": "^6.10.3", 48 | "react": "^15.5.4", 49 | "react-dom": "^15.5.4", 50 | "react-hot-loader": "^3.0.0-beta.6", 51 | "webpack": "^2.3.3", 52 | "webpack-dev-server": "^2.4.2" 53 | }, 54 | "peerDependencies": { 55 | "react": "^0.14.0 || ^15.0.0 || ^16.0.0", 56 | "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | 3 | const flexStyle = { 4 | boxSizing: 'border-box', 5 | display: 'flex', 6 | flexWrap: 'nowrap', 7 | flex: '1 0 auto', 8 | justifyContent: 'space-between', 9 | alignContent: 'space-between', 10 | alignItems: 'stretch' 11 | }; 12 | 13 | const mixProps = (style, props) => { 14 | const divStyle = {}; 15 | 16 | if (props.row) { 17 | divStyle.flexDirection = 'row'; 18 | } else if (props.column) { 19 | divStyle.flexDirection = 'column'; 20 | } 21 | 22 | if (typeof props.width === 'number') { 23 | divStyle.flexGrow = props.width; 24 | } else if (props.width) { 25 | divStyle.flexBasis = 'auto'; 26 | divStyle.flexGrow = 0; 27 | divStyle.flexShrink = 0; 28 | divStyle.width = props.width; 29 | } 30 | 31 | if (props.height) { 32 | divStyle.flexBasis = 'auto'; 33 | divStyle.flexGrow = 0; 34 | divStyle.flexShrink = 0; 35 | divStyle.height = props.height; 36 | } 37 | 38 | if (props.style) { 39 | return {...flexStyle, ...style, ...divStyle, ...props.style}; 40 | } else { 41 | return {...flexStyle, ...style, ...divStyle}; 42 | } 43 | } 44 | 45 | export default class View extends Component { 46 | 47 | static propTypes = { 48 | row: PropTypes.bool, 49 | column: PropTypes.bool, 50 | auto: PropTypes.bool, 51 | className: PropTypes.string, 52 | height: PropTypes.string, 53 | style: PropTypes.object, 54 | width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) 55 | } 56 | 57 | render() { 58 | const style = mixProps({}, this.props); 59 | if (this.props.auto) { 60 | style.flex = '0 0 auto'; 61 | } 62 | 63 | // strip props that are invalid to set on a div. 64 | // (prevents https://fb.me/react-unknown-prop) 65 | let { 66 | row, column, auto, 67 | ...divProps 68 | } = this.props; 69 | 70 | return
{this.props.children}
; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-flexbox 2 | 3 | Implementation of css flexbox in react with inline styles. 4 | It is written in ES6 and requires an ES6 to ES5 transpiler. If there is need for 5 | it I can add a transpiled version to the repo. 6 | 7 | # API 8 | 9 | ## Install 10 | ``` 11 | npm install react-flexbox --save 12 | yarn add react-flexbox 13 | ``` 14 | ```js 15 | const View = require('react-flexbox') 16 | // or 17 | import View from 'react-flexbox' 18 | ``` 19 | 20 | ## UMD 21 | Module exposed as `ReactFlexbox` 22 | 23 | ``` 24 |