├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── demo ├── .babelrc ├── build │ └── index.html ├── package.json ├── src │ └── index.jsx └── webpack.config.js ├── index.js ├── karma.conf.js ├── package.json ├── src └── center.jsx ├── test └── center.spec.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | insert_final_newline = true 10 | max_line_length = 100 11 | tab_width = 4 12 | trim_trailing_whitespace = true 13 | 14 | [*.md] 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | **/*.html 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "commonjs": true, 7 | "mocha": true, 8 | "jquery": true, 9 | "mongo": true 10 | }, 11 | "ecmaFeatures": { 12 | "arrowFunctions": true, 13 | "blockBindings": true, 14 | "classes": true, 15 | "defaultParams": true, 16 | "destructuring": true, 17 | "forOf": true, 18 | "generators": true, 19 | "modules": true, 20 | "objectLiteralComputedProperties": true, 21 | "objectLiteralDuplicateProperties": false, 22 | "objectLiteralShorthandMethods": true, 23 | "objectLiteralShorthandProperties": true, 24 | "restParams": true, 25 | "spread": true, 26 | "superInFunctions": true, 27 | "templateStrings": true, 28 | "jsx": true 29 | }, 30 | "rules": { 31 | "strict": [2, "never"], 32 | "callback-return": 0, 33 | "handle-callback-err": 0, 34 | "no-mixed-requires": [0, false], 35 | "no-new-require": 0, 36 | "no-path-concat": 0, 37 | "no-process-exit": 0, 38 | "no-restricted-modules": 0, 39 | "no-sync": 0, 40 | "arrow-parens": 0, 41 | "arrow-spacing": [2, { "before": true, "after": true }], 42 | "constructor-super": 0, 43 | "generator-star-spacing": 0, 44 | "no-class-assign": 0, 45 | "no-const-assign": 2, 46 | "no-this-before-super": 0, 47 | "no-var": 2, 48 | "object-shorthand": 0, 49 | "prefer-const": 2, 50 | "prefer-spread": 0, 51 | "prefer-reflect": 0, 52 | "require-yield": 0, 53 | "comma-dangle": [2, "always-multiline"], 54 | "no-cond-assign": [2, "always"], 55 | "no-console": 0, 56 | "no-constant-condition": 1, 57 | "no-control-regex": 2, 58 | "no-debugger": 1, 59 | "no-dupe-args": 2, 60 | "no-dupe-keys": 2, 61 | "no-duplicate-case": 2, 62 | "no-empty-character-class": 2, 63 | "no-empty": 2, 64 | "no-ex-assign": 2, 65 | "no-extra-boolean-cast": 0, 66 | "no-extra-parens": [2, "functions"], 67 | "no-extra-semi": 2, 68 | "no-func-assign": 2, 69 | "no-inner-declarations": 2, 70 | "no-invalid-regexp": 2, 71 | "no-irregular-whitespace": 2, 72 | "no-negated-in-lhs": 2, 73 | "no-obj-calls": 2, 74 | "no-regex-spaces": 2, 75 | "no-sparse-arrays": 2, 76 | "no-unreachable": 2, 77 | "use-isnan": 2, 78 | "valid-jsdoc": 0, 79 | "valid-typeof": 2, 80 | "no-unexpected-multiline": 0, 81 | "init-declarations": 0, 82 | "no-catch-shadow": 0, 83 | "no-delete-var": 2, 84 | "no-label-var": 0, 85 | "no-shadow-restricted-names": 2, 86 | "no-shadow": 2, 87 | "no-undef-init": 0, 88 | "no-undef": 2, 89 | "no-undefined": 0, 90 | "no-unused-vars": [2, {"vars": "local", "args": "after-used"}], 91 | "no-use-before-define": [0], 92 | "array-bracket-spacing": [2, "never"], 93 | "brace-style": [2, "1tbs", {"allowSingleLine": true }], 94 | "camelcase": [2, {"properties": "never"}], 95 | "comma-spacing": [2, {"before": false, "after": true}], 96 | "comma-style": [2, "last"], 97 | "computed-property-spacing": [2, "never"], 98 | "consistent-this": 0, 99 | "eol-last": 2, 100 | "func-names": 1, 101 | "func-style": 0, 102 | "id-length": 0, 103 | "indent": [2, 2, { "SwitchCase": 1, "VariableDeclarator": 1 }], 104 | "jsx-quotes": [2, "prefer-double"], 105 | "key-spacing": [2, {"beforeColon": false, "afterColon": true}], 106 | "lines-around-comment": 0, 107 | "linebreak-style": 0, 108 | "max-nested-callbacks": 0, 109 | "new-cap": 0, 110 | "new-parens": 0, 111 | "newline-after-var": 0, 112 | "no-array-constructor": 0, 113 | "no-continue": 0, 114 | "no-inline-comments": 0, 115 | "no-lonely-if": 0, 116 | "no-mixed-spaces-and-tabs": 2, 117 | "no-multiple-empty-lines": [2, {"max": 2, "maxEOF": 1}], 118 | "no-nested-ternary": 0, 119 | "no-new-object": 2, 120 | "no-spaced-func": 2, 121 | "no-ternary": 0, 122 | "no-trailing-spaces": 2, 123 | "no-underscore-dangle": 0, 124 | "no-unneeded-ternary": 0, 125 | "object-curly-spacing": [2, "always"], 126 | "one-var": [2, "never"], 127 | "operator-assignment": 0, 128 | "operator-linebreak": 0, 129 | "padded-blocks": [2, "never"], 130 | "quote-props": 0, 131 | "quotes": [2, "single", "avoid-escape"], 132 | "id-match": 0, 133 | "semi-spacing": [2, {"before": false, "after": true}], 134 | "semi": [2, "always"], 135 | "sort-vars": 0, 136 | "space-before-keywords": [2, "always"], 137 | "space-after-keywords": [2, "always"], 138 | "space-before-blocks": 2, 139 | "space-before-function-paren": [2, { "anonymous": "always", "named": "never" }], 140 | "space-in-parens": [2, "never"], 141 | "space-infix-ops": 2, 142 | "space-return-throw-case": 2, 143 | "space-unary-ops": 0, 144 | "spaced-comment": [2, "always", { 145 | "exceptions": ["-", "+"], 146 | "markers": ["=", "!"] 147 | }], 148 | "wrap-regex": 0, 149 | "accessor-pairs": 0, 150 | "block-scoped-var": 2, 151 | "complexity": [0, 11], 152 | "consistent-return": 2, 153 | "curly": [2, "multi-line"], 154 | "default-case": 2, 155 | "dot-notation": [2, { "allowKeywords": true}], 156 | "dot-location": 0, 157 | "eqeqeq": 2, 158 | "guard-for-in": 2, 159 | "no-alert": 1, 160 | "no-caller": 2, 161 | "no-div-regex": 0, 162 | "no-else-return": 2, 163 | "no-empty-label": 2, 164 | "no-eq-null": 0, 165 | "no-eval": 2, 166 | "no-extend-native": 2, 167 | "no-extra-bind": 2, 168 | "no-fallthrough": 2, 169 | "no-floating-decimal": 2, 170 | "no-implicit-coercion": 0, 171 | "no-implied-eval": 2, 172 | "no-invalid-this": 0, 173 | "no-iterator": 2, 174 | "no-labels": 2, 175 | "no-lone-blocks": 2, 176 | "no-loop-func": 0, 177 | "no-multi-spaces": 2, 178 | "no-multi-str": 2, 179 | "no-native-reassign": 2, 180 | "no-new": 2, 181 | "no-new-func": 2, 182 | "no-new-wrappers": 2, 183 | "no-octal": 2, 184 | "no-octal-escape": 2, 185 | "no-param-reassign": 0, 186 | "no-process-env": 0, 187 | "no-proto": 2, 188 | "no-redeclare": 2, 189 | "no-return-assign": 2, 190 | "no-script-url": 2, 191 | "no-self-compare": 2, 192 | "no-sequences": 2, 193 | "no-throw-literal": 2, 194 | "no-unused-expressions": 0, 195 | "no-useless-call": 0, 196 | "no-void": 0, 197 | "no-warning-comments": [0, { "terms": ["todo", "fixme", "xxx"], "location": "start" }], 198 | "no-with": 2, 199 | "radix": 2, 200 | "vars-on-top": 2, 201 | "wrap-iife": [2, "any"], 202 | "yoda": 2, 203 | "react/display-name": 0, 204 | "react/jsx-boolean-value": [2, "always"], 205 | "react/jsx-closing-bracket-location": [2, "line-aligned"], 206 | "react/jsx-curly-spacing": 0, 207 | "react/jsx-indent-props": [2, 2], 208 | "react/jsx-no-duplicate-props": 0, 209 | "react/jsx-no-undef": 2, 210 | "react/jsx-sort-prop-types": 0, 211 | "react/jsx-sort-props": 0, 212 | "react/jsx-uses-react": 2, 213 | "react/jsx-uses-vars": 2, 214 | "react/no-danger": 0, 215 | "react/no-did-mount-set-state": [2, "allow-in-func"], 216 | "react/no-did-update-set-state": [2, "allow-in-func"], 217 | "react/no-multi-comp": 2, 218 | "react/no-unknown-property": 2, 219 | "react/prop-types": 2, 220 | "react/react-in-jsx-scope": 2, 221 | "react/require-extension": 0, 222 | "react/self-closing-comp": 2, 223 | "react/sort-comp": [2, { 224 | "order": [ 225 | "lifecycle", 226 | "/^on.+$/", 227 | "/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/", 228 | "everything-else", 229 | "/^render.+$/", 230 | "render" 231 | ] 232 | }], 233 | "react/wrap-multilines": [2, { 234 | "declaration": true, 235 | "assignment": true, 236 | "return": true 237 | }], 238 | "babel/generator-star-spacing": 0, 239 | "babel/new-cap": 0, 240 | "babel/object-shorthand": 2, 241 | "babel/arrow-parens": 0, 242 | "babel/no-await-in-loop": 0 243 | }, 244 | "plugins": [ 245 | "babel", 246 | "react" 247 | ] 248 | } 249 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | coverage 2 | dist 3 | demo/node_modules 4 | demo/build/** 5 | !demo/build/index.html 6 | node_modules 7 | npm-debug.log 8 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | .editorconfig 3 | .eslintignore 4 | .eslintrc 5 | .gitignore 6 | .npmignore 7 | .travis.yml 8 | coverage 9 | demo 10 | karma* 11 | node_modules 12 | npm-debug.log 13 | src 14 | tests 15 | webpack* 16 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4.1" 4 | before_install: 5 | - export CHROME_BIN=chromium-browser 6 | - export DISPLAY=:99.0 7 | - sh -e /etc/init.d/xvfb start 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Anton Matveev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://img.shields.io/npm/v/react-center.svg?style=flat-square)](https://www.npmjs.com/package/react-center) [![Build Status](https://img.shields.io/travis/aush/react-center.svg?style=flat-square)](https://travis-ci.org/aush/react-center) [![Dependency Status](https://img.shields.io/david/aush/react-center.svg?style=flat-square)](https://david-dm.org/aush/react-center) [![devDependency Status](https://img.shields.io/david/dev/aush/react-center.svg?style=flat-square)](https://david-dm.org/aush/react-center#info=devDependencies) [![Coverage Status](https://img.shields.io/coveralls/aush/react-center.svg?style=flat-square)](https://coveralls.io/github/aush/react-center?branch=master) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/aush/react-center/master/LICENSE) 2 | 3 | # React Center 4 | Simple react component to center content horizontally and vertically 5 | ###Install 6 | `npm install --save react-center` 7 | 8 | Don't forget to manually install React^0.14 (peer dependency) if you're using npm@3. 9 | ###Use 10 | #####ES6 11 | ```javascript 12 | import React from 'react'; 13 | import ReactDOM from 'react-dom'; 14 | import Center from 'react-center'; 15 | 16 | ReactDOM.render( 17 |
18 |
1
19 |
, 20 | document.getElementById('app') 21 | ); 22 | ``` 23 | #####ES5 24 | ```javascript 25 | var Center = require('react-center'); 26 | ... 27 | ``` 28 | #####Good old 1998 Script Tag: 29 | The component depends on React ^0.14 (a introduction of stateless components), so if you're using it without a build step, React ^0.14 must be present as a global. 30 | ````html 31 | 32 | 33 | 34 | ```` 35 | ###API 36 | Check [tests](/test/center.spec.js). 37 | ###Demo 38 | Navigate to the 'demo' folder and execute 39 | ``` 40 | npm install 41 | npm run build 42 | npm start 43 | ``` 44 | ###Codepen example 45 | http://codepen.io/aush/pen/vLQYJY 46 | -------------------------------------------------------------------------------- /demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /demo/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React-center demo 5 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-center-demo", 3 | "description": "Demo for react-center component", 4 | "scripts": { 5 | "build": "webpack --display-error-details --progress", 6 | "start": "opn build/index.html" 7 | }, 8 | "dependencies": {}, 9 | "devDependencies": { 10 | "babel-loader": "^6.2.1", 11 | "babel-preset-es2015": "^6.3.13", 12 | "babel-preset-react": "^6.3.13", 13 | "babel-preset-stage-0": "^6.3.13", 14 | "opn-cli": "^3.0.1", 15 | "webpack": "^1.12.12" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Center from '../../dist/index'; 4 | 5 | ReactDOM.render( 6 |
7 |
8 |
, 9 | document.getElementById('app') 10 | ); 11 | -------------------------------------------------------------------------------- /demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | devtool: 'source-map', 5 | entry: path.join(__dirname, 'src', 'index'), 6 | output: { 7 | path: path.join(__dirname, 'build'), 8 | filename: 'bundle.js', 9 | }, 10 | module: { 11 | loaders: [{ 12 | test: /\.jsx?$/, 13 | loader: 'babel', 14 | include: path.join(__dirname, 'src'), 15 | }], 16 | }, 17 | resolve: { 18 | extensions: ['', '.js', '.jsx'], 19 | alias: { 20 | 'react': path.resolve('../node_modules/react'), 21 | 'react-dom': path.resolve('../node_modules/react-dom'), 22 | }, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import Center from './src/center'; 2 | // Babel 6 exports es6 defaults as `exports["default"] = default`, not as `module.exports = default`, which is correct in terms of es6, but confusing for people using commonjs and used to the babel 5 wrong behavior. Since we are exporting ONLY the default export from our package it makes sence to simulate the old behavior. 3 | module.exports = Center; 4 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const _IS_CI_ = process.env.CONTINUOUS_INTEGRATION; 4 | const _IS_TRAVIS_CI_ = process.env.TRAVIS; 5 | const _IS_BUILDING_PACKAGE_ = process.env.NODE_ENV === 'production'; 6 | 7 | module.exports = config => { 8 | config.set({ 9 | basePath: '', 10 | frameworks: ['mocha', 'source-map-support'], 11 | reporters: _IS_TRAVIS_CI_ ? 12 | ['mocha', 'coverage', 'coveralls'] : 13 | ['mocha', 'coverage'], 14 | coverageReporter: _IS_CI_ ? 15 | { type: 'lcov', dir: 'coverage/' } : 16 | { type: 'html', dir: 'coverage/' }, 17 | autoWatch: _IS_CI_ ? false : true, 18 | singleRun: (_IS_CI_ || _IS_BUILDING_PACKAGE_) ? true : false, 19 | browsers: _IS_TRAVIS_CI_ ? 20 | ['Chrome_travis_ci'] : 21 | ['Chrome'], 22 | customLaunchers: { 23 | Chrome_travis_ci: { 24 | base: 'Chrome', 25 | flags: ['--no-sandbox'], 26 | }, 27 | }, 28 | files: [ 29 | './test/**/*.spec.js*', 30 | ], 31 | preprocessors: { 32 | './test/**/*.spec.js*': ['webpack'], 33 | }, 34 | webpack: { 35 | devtool: 'inline-source-map', 36 | module: { 37 | noParse: [/node_modules\/sinon\//], 38 | loaders: [{ 39 | test: /\.jsx?$/, 40 | loader: 'babel', 41 | include: [ 42 | path.join(__dirname, 'test'), 43 | path.join(__dirname, 'src'), 44 | ], 45 | }, { 46 | test: /\.json$/, 47 | loader: 'json', 48 | }, { 49 | test: /sinon.*\.js$/, 50 | loader: 'imports?define=>false,require=>false', 51 | }], 52 | postLoaders: [{ 53 | test: /\.jsx?$/, 54 | loader: 'istanbul-instrumenter', 55 | include: [ 56 | path.join(__dirname, 'src'), 57 | ], 58 | }], 59 | }, 60 | node: { 61 | fs: 'empty', 62 | }, 63 | resolve: { 64 | extensions: ['', '.js', '.jsx', '.json'], 65 | alias: { 66 | 'sinon': 'sinon/pkg/sinon', 67 | }, 68 | }, 69 | externals: { 70 | 'jsdom': 'window', 71 | 'react/lib/ExecutionEnvironment': true, 72 | 'react/lib/ReactContext': true, 73 | }, 74 | }, 75 | webpackMiddleware: { 76 | noInfo: true, 77 | }, 78 | }); 79 | }; 80 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-center", 3 | "version": "1.1.1", 4 | "description": "Simple react component to center content horizontally and vertically", 5 | "scripts": { 6 | "clean": "rimraf dist/*", 7 | "build:umd": "webpack --display-error-details --progress", 8 | "build": "better-npm-run build", 9 | "lint": "eslint src/**/*.js*", 10 | "test": "karma start", 11 | "prepublish": "npm run build" 12 | }, 13 | "betterScripts": { 14 | "build": { 15 | "command": "npm run lint && npm run test && npm run clean && npm run build:umd", 16 | "env": { 17 | "NODE_ENV": "production" 18 | } 19 | } 20 | }, 21 | "main": "dist/index.js", 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/aush/react-center.git" 25 | }, 26 | "keywords": [ 27 | "react", 28 | "reactjs", 29 | "react-component", 30 | "flex", 31 | "flexbox", 32 | "flex-box", 33 | "layout", 34 | "ui", 35 | "center" 36 | ], 37 | "author": { 38 | "name": "Anton Matveev", 39 | "email": "aush.tx@gmail.com", 40 | "url": "http://github.com/aush" 41 | }, 42 | "license": "MIT", 43 | "bugs": { 44 | "url": "https://github.com/aush/react-center/issues" 45 | }, 46 | "homepage": "https://github.com/aush/react-center", 47 | "devDependencies": { 48 | "babel-core": "^6.4.5", 49 | "babel-eslint": "^5.0.0-beta6", 50 | "babel-loader": "^6.2.1", 51 | "babel-preset-es2015": "^6.3.13", 52 | "babel-preset-react": "^6.3.13", 53 | "babel-preset-stage-0": "^6.3.13", 54 | "better-npm-run": "0.0.6", 55 | "chai": "^3.5.0", 56 | "enzyme": "^1.5.0", 57 | "eslint": "^1.10.3", 58 | "eslint-plugin-babel": "^3.0.0", 59 | "eslint-plugin-react": "^3.16.1", 60 | "imports-loader": "^0.6.5", 61 | "istanbul-instrumenter-loader": "^0.1.3", 62 | "json-loader": "^0.5.4", 63 | "karma": "^0.13.19", 64 | "karma-chrome-launcher": "^0.2.2", 65 | "karma-coverage": "^0.5.3", 66 | "karma-coveralls": "^1.1.2", 67 | "karma-mocha": "^0.2.1", 68 | "karma-mocha-reporter": "^1.1.5", 69 | "karma-source-map-support": "^1.1.0", 70 | "karma-webpack": "^1.7.0", 71 | "mocha": "^2.4.5", 72 | "react": "^0.14.7", 73 | "react-addons-test-utils": "^0.14.7", 74 | "react-dom": "^0.14.7", 75 | "rimraf": "^2.5.1", 76 | "webpack": "^1.12.12" 77 | }, 78 | "peerDependencies": { 79 | "react": ">=0.14.0" 80 | }, 81 | "dependencies": { 82 | "inline-style-prefixer": "^0.6.7" 83 | }, 84 | "engines": { 85 | "node": ">=4.1.0" 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/center.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Prefixer from 'inline-style-prefixer'; 3 | 4 | export default ({ style, prefixer = new Prefixer(), children, ...rest }) => { 5 | const flexContainerStyle = { 6 | alignContent: 'center', 7 | alignItems: 'center', 8 | boxSizing: 'border-box', 9 | display: 'flex', 10 | flexDirection: 'row', 11 | flexWrap: 'nowrap', 12 | justifyContent: 'center', 13 | }; 14 | 15 | return ( 16 |
17 | {children} 18 |
19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /test/center.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import { expect } from 'chai'; 4 | import Prefixer from 'inline-style-prefixer'; 5 | import Center from '../src/center'; 6 | 7 | describe('Center', () => { 8 | it('should exist', () => { expect(Center).to.be.ok; }); 9 | 10 | it('should render', () => { 11 | const wrapper = shallow(
); 12 | 13 | expect(wrapper).to.be.ok; 14 | }); 15 | 16 | it('should pass a style prop', () => { 17 | const wrapper = shallow(
); 18 | 19 | expect(wrapper.prop('style')).to.eql({ 20 | alignContent: 'center', 21 | alignItems: 'center', 22 | boxSizing: 'border-box', 23 | display: 'flex', 24 | flexDirection: 'row', 25 | flexWrap: 'nowrap', 26 | justifyContent: 'center', 27 | }); 28 | }); 29 | 30 | it('should pass a style prop with vendor prefixes', () => { 31 | const customUserAgent = 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1468.0 Safari/537.36'; 32 | const prefixer = new Prefixer({ userAgent: customUserAgent }); 33 | 34 | const wrapper = shallow(
); 35 | 36 | expect(wrapper.prop('style')).to.eql({ 37 | alignContent: 'center', 38 | alignItems: 'center', 39 | boxSizing: 'border-box', 40 | display: '-webkit-flex', 41 | flexDirection: 'row', 42 | flexWrap: 'nowrap', 43 | justifyContent: 'center', 44 | }); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | 4 | const SRC_DIR = path.join(__dirname, 'src'); 5 | 6 | module.exports = { 7 | devtool: 'source-map', 8 | entry: path.join(__dirname, 'index'), 9 | output: { 10 | path: path.join(__dirname, 'dist'), 11 | filename: 'index.js', 12 | library: 'ReactCenter', 13 | libraryTarget: 'umd', 14 | }, 15 | externals: { 16 | 'react': { 17 | root: 'React', 18 | commonjs2: 'react', 19 | commonjs: 'react', 20 | amd: 'react', 21 | }, 22 | }, 23 | module: { 24 | loaders: [{ 25 | test: /\.jsx?$/, 26 | loader: 'babel', 27 | include: [ 28 | SRC_DIR, 29 | path.join(__dirname, 'index'), 30 | ], 31 | }], 32 | }, 33 | plugins: [ 34 | new webpack.optimize.DedupePlugin(), 35 | new webpack.optimize.OccurenceOrderPlugin(), 36 | new webpack.optimize.UglifyJsPlugin({ 37 | compress: { 38 | warnings: false, 39 | }, 40 | }), 41 | new webpack.DefinePlugin({ 42 | 'process.env.NODE_ENV': JSON.stringify('production'), 43 | }), 44 | ], 45 | resolve: { extensions: ['', '.js', '.jsx'] }, 46 | }; 47 | --------------------------------------------------------------------------------