react-grid-system - npm Package Compare versions

Comparing version 3.2.3 to 4.0.0

build/grid/Col/index.js

@@ -25,2 +25,4 @@ 'use strict';
 
+var _config = require('../../config');
+
 var _utils = require('../../utils');
@@ -41,24 +43,23 @@
 
-  function Col() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
+  function Col(props) {
     _classCallCheck(this, Col);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = _possibleConstructorReturn(this, (Col.__proto__ || Object.getPrototypeOf(Col)).call(this, props));
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Col.__proto__ || Object.getPrototypeOf(Col)).call.apply(_ref, [this].concat(args))), _this), _this.componentWillMount = function () {
+    _this.componentDidMount = function () {
       _this.setScreenClass();
-    }, _this.componentDidMount = function () {
       _this.eventListener = (0, _throttle2.default)(_this.setScreenClass, 100);
       window.addEventListener('resize', _this.eventListener);
-    }, _this.componentWillUnmount = function () {
+    };
+
+    _this.componentWillUnmount = function () {
       _this.eventListener.cancel();
       window.removeEventListener('resize', _this.eventListener);
-    }, _this.setScreenClass = function () {
-      _this.setState({ screenClass: (0, _utils.getScreenClass)(_this.context) });
-    }, _this.render = function () {
+    };
+
+    _this.setScreenClass = function () {
+      _this.setState({ screenClass: (0, _utils.getScreenClass)() });
+    };
+
+    _this.render = function () {
       var _this$props = _this.props,
@@ -87,5 +88,5 @@ children = _this$props.children,
         screenClass: _this.state.screenClass,
-        gutterWidth: _this.context.gutterWidth,
-        moreStyle: style,
-        gridColumns: _this.context.gridColumns
+        gutterWidth: (0, _config.getConfiguration)().gutterWidth,
+        gridColumns: (0, _config.getConfiguration)().gridColumns,
+        moreStyle: style
       });
@@ -97,3 +98,8 @@ return _react2.default.createElement(
       );
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    };
+
+    _this.state = {
+      screenClass: (0, _config.getConfiguration)().defaultScreenClass
+    };
+    return _this;
   }
@@ -181,8 +187,2 @@
 };
-Col.contextTypes = {
-  serverSideScreenClass: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number),
-  gutterWidth: _propTypes2.default.number,
-  gridColumns: _propTypes2.default.number
-};
 exports.default = Col;

build/grid/Container/index.js

@@ -25,2 +25,4 @@ 'use strict';
 
+var _config = require('../../config');
+
 var _utils = require('../../utils');
@@ -41,24 +43,23 @@
 
-  function Container() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
+  function Container(props) {
     _classCallCheck(this, Container);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = _possibleConstructorReturn(this, (Container.__proto__ || Object.getPrototypeOf(Container)).call(this, props));
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Container.__proto__ || Object.getPrototypeOf(Container)).call.apply(_ref, [this].concat(args))), _this), _this.componentWillMount = function () {
+    _this.componentDidMount = function () {
       _this.setScreenClass();
-    }, _this.componentDidMount = function () {
       _this.eventListener = (0, _throttle2.default)(_this.setScreenClass, 100);
       window.addEventListener('resize', _this.eventListener);
-    }, _this.componentWillUnmount = function () {
+    };
+
+    _this.componentWillUnmount = function () {
       _this.eventListener.cancel();
       window.removeEventListener('resize', _this.eventListener);
-    }, _this.setScreenClass = function () {
-      _this.setState({ screenClass: (0, _utils.getScreenClass)(_this.context) });
-    }, _this.render = function () {
+    };
+
+    _this.setScreenClass = function () {
+      _this.setState({ screenClass: (0, _utils.getScreenClass)() });
+    };
+
+    _this.render = function () {
       var _this$props = _this.props,
@@ -83,4 +84,4 @@ children = _this$props.children,
         screenClass: _this.state.screenClass,
-        containerWidths: _this.context.containerWidths,
-        gutterWidth: _this.context.gutterWidth,
+        containerWidths: (0, _config.getConfiguration)().containerWidths,
+        gutterWidth: (0, _config.getConfiguration)().gutterWidth,
         moreStyle: style
@@ -94,3 +95,8 @@ });
       );
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    };
+
+    _this.state = {
+      screenClass: (0, _config.getConfiguration)().defaultScreenClass
+    };
+    return _this;
   }
@@ -140,8 +146,2 @@
 };
-Container.contextTypes = {
-  serverSideScreenClass: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number),
-  containerWidths: _propTypes2.default.arrayOf(_propTypes2.default.number),
-  gutterWidth: _propTypes2.default.number
-};
 Container.defaultProps = {
@@ -148,0 +148,0 @@ fluid: false,

build/grid/Row/index.js

@@ -21,2 +21,4 @@ 'use strict';
 
+var _config = require('../../config');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -46,7 +48,3 @@
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Row.__proto__ || Object.getPrototypeOf(Row)).call.apply(_ref, [this].concat(args))), _this), _this.getChildContext = function () {
-      return {
-        gutterWidth: _this.props.nogutter ? 0 : _this.context.gutterWidth
-      };
-    }, _this.render = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Row.__proto__ || Object.getPrototypeOf(Row)).call.apply(_ref, [this].concat(args))), _this), _this.render = function () {
       var _this$props = _this.props,
@@ -61,3 +59,3 @@ children = _this$props.children,
       var theStyle = (0, _style2.default)({
-        gutterWidth: nogutter ? 0 : _this.context.gutterWidth,
+        gutterWidth: nogutter ? 0 : (0, _config.getConfiguration)().gutterWidth,
         align: align,
@@ -106,8 +104,2 @@ debug: debug,
 };
-Row.contextTypes = {
-  gutterWidth: _propTypes2.default.number
-};
-Row.childContextTypes = {
-  gutterWidth: _propTypes2.default.number
-};
 exports.default = Row;

build/index.js

@@ -6,4 +6,13 @@ 'use strict';
 });
-exports.ScreenClassRender = exports.Visible = exports.Hidden = exports.Row = exports.Container = exports.Col = undefined;
+exports.setConfiguration = exports.ScreenClassRender = exports.Visible = exports.Hidden = exports.Row = exports.Container = exports.Col = undefined;
 
+var _config = require('./config');
+
+Object.defineProperty(exports, 'setConfiguration', {
+  enumerable: true,
+  get: function get() {
+    return _config.setConfiguration;
+  }
+});
+
 var _Col2 = require('./grid/Col');
@@ -10,0 +19,0 @@

build/utilities/Hidden/index.js

@@ -23,2 +23,4 @@ 'use strict';
 
+var _config = require('../../config');
+
 var _utils = require('../../utils');
@@ -39,24 +41,23 @@
 
-  function Hidden() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
+  function Hidden(props) {
     _classCallCheck(this, Hidden);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = _possibleConstructorReturn(this, (Hidden.__proto__ || Object.getPrototypeOf(Hidden)).call(this, props));
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hidden.__proto__ || Object.getPrototypeOf(Hidden)).call.apply(_ref, [this].concat(args))), _this), _this.componentWillMount = function () {
+    _this.componentDidMount = function () {
       _this.setScreenClass();
-    }, _this.componentDidMount = function () {
       _this.eventListener = (0, _throttle2.default)(_this.setScreenClass, 100);
       window.addEventListener('resize', _this.eventListener);
-    }, _this.componentWillUnmount = function () {
+    };
+
+    _this.componentWillUnmount = function () {
       _this.eventListener.cancel();
       window.removeEventListener('resize', _this.eventListener);
-    }, _this.setScreenClass = function () {
-      _this.setState({ screenClass: (0, _utils.getScreenClass)(_this.context) });
-    }, _this.render = function () {
+    };
+
+    _this.setScreenClass = function () {
+      _this.setState({ screenClass: (0, _utils.getScreenClass)() });
+    };
+
+    _this.render = function () {
       if (style.hidden({
@@ -75,3 +76,8 @@ screenClass: _this.state.screenClass,
       );
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    };
+
+    _this.state = {
+      screenClass: (0, _config.getConfiguration)().defaultScreenClass
+    };
+    return _this;
   }
@@ -108,6 +114,2 @@
 };
-Hidden.contextTypes = {
-  serverSideScreenClass: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number)
-};
 Hidden.defaultProps = {
@@ -114,0 +116,0 @@ xs: false,

build/utilities/ScreenClassRender/index.js

@@ -19,2 +19,4 @@ 'use strict';
 
+var _config = require('../../config');
+
 var _utils = require('../../utils');
@@ -34,26 +36,27 @@
 
-  function ScreenClassRender() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
+  function ScreenClassRender(props) {
     _classCallCheck(this, ScreenClassRender);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = _possibleConstructorReturn(this, (ScreenClassRender.__proto__ || Object.getPrototypeOf(ScreenClassRender)).call(this, props));
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ScreenClassRender.__proto__ || Object.getPrototypeOf(ScreenClassRender)).call.apply(_ref, [this].concat(args))), _this), _this.componentWillMount = function () {
+    _this.componentDidMount = function () {
       _this.setScreenClass();
-    }, _this.componentDidMount = function () {
       _this.eventListener = (0, _throttle2.default)(_this.setScreenClass, 100);
       window.addEventListener('resize', _this.eventListener);
-    }, _this.componentWillUnmount = function () {
+    };
+
+    _this.componentWillUnmount = function () {
       _this.eventListener.cancel();
       window.removeEventListener('resize', _this.eventListener);
-    }, _this.setScreenClass = function () {
-      _this.setState({ screenClass: (0, _utils.getScreenClass)(_this.context) });
-    }, _this.getStyle = function () {
+    };
+
+    _this.setScreenClass = function () {
+      _this.setState({ screenClass: (0, _utils.getScreenClass)() });
+    };
+
+    _this.getStyle = function () {
       return _this.props.style(_this.state.screenClass, _this.props.children.props);
-    }, _this.render = function () {
+    };
+
+    _this.render = function () {
       if (_this.props.render) {
@@ -74,3 +77,8 @@ return _react2.default.createElement(
       return false;
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    };
+
+    _this.state = {
+      screenClass: (0, _config.getConfiguration)().defaultScreenClass
+    };
+    return _this;
   }
@@ -101,6 +109,2 @@
 };
-ScreenClassRender.contextTypes = {
-  serverSideScreenClass: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number)
-};
 exports.default = ScreenClassRender;

build/utilities/Visible/index.js

@@ -23,2 +23,4 @@ 'use strict';
 
+var _config = require('../../config');
+
 var _utils = require('../../utils');
@@ -39,24 +41,23 @@
 
-  function Visible() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
+  function Visible(props) {
     _classCallCheck(this, Visible);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = _possibleConstructorReturn(this, (Visible.__proto__ || Object.getPrototypeOf(Visible)).call(this, props));
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Visible.__proto__ || Object.getPrototypeOf(Visible)).call.apply(_ref, [this].concat(args))), _this), _this.componentWillMount = function () {
+    _this.componentDidMount = function () {
       _this.setScreenClass();
-    }, _this.componentDidMount = function () {
       _this.eventListener = (0, _throttle2.default)(_this.setScreenClass, 100);
       window.addEventListener('resize', _this.eventListener);
-    }, _this.componentWillUnmount = function () {
+    };
+
+    _this.componentWillUnmount = function () {
       _this.eventListener.cancel();
       window.removeEventListener('resize', _this.eventListener);
-    }, _this.setScreenClass = function () {
-      _this.setState({ screenClass: (0, _utils.getScreenClass)(_this.context) });
-    }, _this.render = function () {
+    };
+
+    _this.setScreenClass = function () {
+      _this.setState({ screenClass: (0, _utils.getScreenClass)() });
+    };
+
+    _this.render = function () {
       if (!style.visible({
@@ -75,3 +76,8 @@ screenClass: _this.state.screenClass,
       );
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    };
+
+    _this.state = {
+      screenClass: (0, _config.getConfiguration)().defaultScreenClass
+    };
+    return _this;
   }
@@ -108,6 +114,2 @@
 };
-Visible.contextTypes = {
-  serverSideScreenClass: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number)
-};
 Visible.defaultProps = {
@@ -114,0 +116,0 @@ xs: false,

build/utils.js

@@ -6,5 +6,6 @@ 'use strict';
 });
-/* global window */
-/* eslint "no-console": "off" */
+exports.getScreenClass = exports.screenClasses = undefined;
 
+var _config = require('./config');
+
 var getViewPort = function getViewPort() {
@@ -15,29 +16,21 @@ if (typeof window !== 'undefined' && window.innerWidth) {
   return null;
-};
+}; /* global window */
+/* eslint "no-console": "off" */
 
 var screenClasses = exports.screenClasses = ['xs', 'sm', 'md', 'lg', 'xl'];
 
-var defaultBreakpoints = exports.defaultBreakpoints = [576, 768, 992, 1200];
+var getScreenClass = exports.getScreenClass = function getScreenClass() {
+  var _getConfiguration = (0, _config.getConfiguration)(),
+      breakpoints = _getConfiguration.breakpoints,
+      defaultScreenClass = _getConfiguration.defaultScreenClass;
 
-var defaultContainerWidths = exports.defaultContainerWidths = [540, 750, 960, 1140];
+  var screenClass = defaultScreenClass;
 
-var defaultGutterWidth = exports.defaultGutterWidth = 30;
-
-var defaultGridColumns = exports.defaultGridColumns = 12;
-
-var getScreenClass = exports.getScreenClass = function getScreenClass(_ref) {
-  var serverSideScreenClass = _ref.serverSideScreenClass,
-      breakpoints = _ref.breakpoints;
-
-  var theBreakpoints = breakpoints && breakpoints.length ? breakpoints : defaultBreakpoints;
-
-  var screenClass = serverSideScreenClass || 'xl';
-
   var viewport = getViewPort();
   if (viewport) {
     screenClass = 'xs';
-    if (theBreakpoints[0] && viewport >= theBreakpoints[0]) screenClass = 'sm';
-    if (theBreakpoints[1] && viewport >= theBreakpoints[1]) screenClass = 'md';
-    if (theBreakpoints[2] && viewport >= theBreakpoints[2]) screenClass = 'lg';
-    if (theBreakpoints[3] && viewport >= theBreakpoints[3]) screenClass = 'xl';
+    if (breakpoints[0] && viewport >= breakpoints[0]) screenClass = 'sm';
+    if (breakpoints[1] && viewport >= breakpoints[1]) screenClass = 'md';
+    if (breakpoints[2] && viewport >= breakpoints[2]) screenClass = 'lg';
+    if (breakpoints[3] && viewport >= breakpoints[3]) screenClass = 'xl';
   }
@@ -44,0 +37,0 @@

package.json

 {
   "name": "react-grid-system",
-  "version": "3.2.3",
+  "version": "4.0.0",
   "description": "A no CSS Bootstrap-like responsive grid system for React.",
@@ -40,3 +40,3 @@ "main": "./build/index.js",
   "dependencies": {
-    "lodash": "^4.17.5",
+    "lodash": "^4.17.10",
     "prop-types": "^15.6.1"
@@ -46,5 +46,5 @@ },
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
@@ -54,11 +54,11 @@ "babel-preset-stage-1": "^6.24.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "react-styleguidist": "^7.0.8",
-    "webpack": "^4.6.0",
+    "eslint-plugin-react": "^7.8.2",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "react-styleguidist": "^7.0.14",
+    "webpack": "^4.8.3",
     "webpack-blocks": "^1.0.0"
   }
 }

README.md

@@ -10,3 +10,3 @@ # react-grid-system
 * [Getting started](#getting-started)
-* [Context types](#context-types)
+* [Configuration](#configuration)
 * [API documentation](#api-documentation)
@@ -34,3 +34,5 @@ * [Example application with SSR](#example-application-with-ssr)
 
-```html
+```javascript
+import { Container, Row, Col } from 'react-grid-system';
+
 <Container>
@@ -60,3 +62,5 @@ <Row>
 
-```html
+```javascript
+import { Visible } from 'react-grid-system';
+
 <p>
@@ -73,3 +77,5 @@ <span>Your current screen class is </span>
 
-```html
+```javascript
+import { Visible, Hidden } from 'react-grid-system';
+
 <Visible xs sm>
@@ -91,4 +97,6 @@ <p>Paragraph visible on extra small and small.</p>
 
-```html
-<ScreenClassRender render={(screenClass) => (
+```javascript
+import { ScreenClassRender } from 'react-grid-system';
+
+<ScreenClassRender render={screenClass => (
   <p style={{ fontSize: ['lg', 'xl'].includes(screenClass) ? '2rem' : '1rem' }} >
@@ -100,7 +108,7 @@ Screen class: {screenClass}
 
-## Context types
+## Configuration
 
-The following child context types can be provided to the grid components, to alter their responsive behavior. An example on how to use them can be found in the [Example application with SSR](#example-application-with-ssr) below.
+The following settings can be configured, to alter the responsive behavior of the grid components:
 
-| Context Type      | Default Value      | Description |
+| Setting      | Default Value      | Description |
 | ----------------- | ------------------ | ------------------------------ |
@@ -111,4 +119,14 @@ | `breakpoints`     | `[576, 768, 992, 1200]` | The breakpoints (minimum width) of devices in screen class `sm`, `md`, `lg`, and `xl`. The default values are based on the Bootstrap 4 breakpoints. |
 | `gridColumns` | `12` | The number of colums in the grid . |
-| `serverSideScreenClass` | `xl` | The screen class used when the view port cannot be determined using `window`. This is useful for server-side rendering (SSR) based on the user agent. See also the example application below. |
+| `defaultScreenClass` | `xl` | The screen class used when the view port cannot be determined using `window`. This is useful for server-side rendering (SSR) based on the user agent. See also the example application below. |
 
+These settings can be configured in the following way:
+
+```javascript
+import { setConfiguration } from 'react-grid-system';
+
+setConfiguration({ defaultScreenClass: 'sm', gridColumns: 20 });
+```
+
+ An example on how to use them can be found in the [Example application with SSR](#example-application-with-ssr) below.
+
 ## API documentation
@@ -115,0 +133,0 @@

src/grid/Col/index.jsx

@@ -7,2 +7,3 @@ /* global window */
 import getStyle from './style';
+import { getConfiguration } from '../../config';
 import { getScreenClass } from '../../utils';
@@ -93,14 +94,11 @@
 
-  static contextTypes = {
-    serverSideScreenClass: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-    breakpoints: PropTypes.arrayOf(PropTypes.number),
-    gutterWidth: PropTypes.number,
-    gridColumns: PropTypes.number,
-  };
-
-  componentWillMount = () => {
-    this.setScreenClass();
+  constructor(props) {
+    super(props);
+    this.state = {
+      screenClass: getConfiguration().defaultScreenClass,
+    };
   }
 
   componentDidMount = () => {
+    this.setScreenClass();
     this.eventListener = throttle(this.setScreenClass, 100);
@@ -116,3 +114,3 @@ window.addEventListener('resize', this.eventListener);
   setScreenClass = () => {
-    this.setState({ screenClass: getScreenClass(this.context) });
+    this.setState({ screenClass: getScreenClass() });
   }
@@ -134,5 +132,5 @@
       screenClass: this.state.screenClass,
-      gutterWidth: this.context.gutterWidth,
+      gutterWidth: getConfiguration().gutterWidth,
+      gridColumns: getConfiguration().gridColumns,
       moreStyle: style,
-      gridColumns: this.context.gridColumns,
     });
@@ -139,0 +137,0 @@ return (

src/grid/Container/index.jsx

@@ -7,2 +7,3 @@ /* global window */
 import getStyle, { getAfterStyle } from './style';
+import { getConfiguration } from '../../config';
 import { getScreenClass } from '../../utils';
@@ -54,9 +55,2 @@
 
-  static contextTypes = {
-    serverSideScreenClass: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-    breakpoints: PropTypes.arrayOf(PropTypes.number),
-    containerWidths: PropTypes.arrayOf(PropTypes.number),
-    gutterWidth: PropTypes.number,
-  };
-
   static defaultProps = {
@@ -72,7 +66,11 @@ fluid: false,
 
-  componentWillMount = () => {
-    this.setScreenClass();
+  constructor(props) {
+    super(props);
+    this.state = {
+      screenClass: getConfiguration().defaultScreenClass,
+    };
   }
 
   componentDidMount = () => {
+    this.setScreenClass();
     this.eventListener = throttle(this.setScreenClass, 100);
@@ -88,3 +86,3 @@ window.addEventListener('resize', this.eventListener);
   setScreenClass = () => {
-    this.setState({ screenClass: getScreenClass(this.context) });
+    this.setState({ screenClass: getScreenClass() });
   }
@@ -104,4 +102,4 @@
       screenClass: this.state.screenClass,
-      containerWidths: this.context.containerWidths,
-      gutterWidth: this.context.gutterWidth,
+      containerWidths: getConfiguration().containerWidths,
+      gutterWidth: getConfiguration().gutterWidth,
       moreStyle: style,
@@ -108,0 +106,0 @@ });

src/grid/Row/index.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 import getStyle from './style';
+import { getConfiguration } from '../../config';
 
@@ -39,14 +40,2 @@ export default class Row extends React.Component {
 
-  static contextTypes = {
-    gutterWidth: PropTypes.number,
-  };
-
-  static childContextTypes = {
-    gutterWidth: PropTypes.number,
-  };
-
-  getChildContext = () => ({
-    gutterWidth: this.props.nogutter ? 0 : this.context.gutterWidth,
-  });
-
   render = () => {
@@ -57,3 +46,3 @@ const {
     const theStyle = getStyle({
-      gutterWidth: nogutter ? 0 : this.context.gutterWidth,
+      gutterWidth: nogutter ? 0 : getConfiguration().gutterWidth,
       align,
@@ -60,0 +49,0 @@ debug,

src/index.js

@@ -10,1 +10,2 @@ // Grid
 export ScreenClassRender from './utilities/ScreenClassRender';
+export { setConfiguration } from './config';

src/utilities/Hidden/index.jsx

@@ -7,2 +7,3 @@ /* global window */
 import * as style from './style';
+import { getConfiguration } from '../../config';
 import { getScreenClass } from '../../utils';
@@ -38,7 +39,2 @@
 
-  static contextTypes = {
-    serverSideScreenClass: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-    breakpoints: PropTypes.arrayOf(PropTypes.number),
-  };
-
   static defaultProps = {
@@ -52,7 +48,11 @@ xs: false,
 
-  componentWillMount = () => {
-    this.setScreenClass();
+  constructor(props) {
+    super(props);
+    this.state = {
+      screenClass: getConfiguration().defaultScreenClass,
+    };
   }
 
   componentDidMount = () => {
+    this.setScreenClass();
     this.eventListener = throttle(this.setScreenClass, 100);
@@ -68,3 +68,3 @@ window.addEventListener('resize', this.eventListener);
   setScreenClass = () => {
-    this.setState({ screenClass: getScreenClass(this.context) });
+    this.setState({ screenClass: getScreenClass() });
   }
@@ -71,0 +71,0 @@

src/utilities/ScreenClassRender/index.jsx

@@ -7,2 +7,3 @@ /* global window */
 import throttle from 'lodash/throttle';
+import { getConfiguration } from '../../config';
 import { getScreenClass } from '../../utils';
@@ -33,12 +34,11 @@
 
-  static contextTypes = {
-    serverSideScreenClass: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-    breakpoints: PropTypes.arrayOf(PropTypes.number),
-  };
-
-  componentWillMount = () => {
-    this.setScreenClass();
+  constructor(props) {
+    super(props);
+    this.state = {
+      screenClass: getConfiguration().defaultScreenClass,
+    };
   }
 
   componentDidMount = () => {
+    this.setScreenClass();
     this.eventListener = throttle(this.setScreenClass, 100);
@@ -54,3 +54,3 @@ window.addEventListener('resize', this.eventListener);
   setScreenClass = () => {
-    this.setState({ screenClass: getScreenClass(this.context) });
+    this.setState({ screenClass: getScreenClass() });
   }
@@ -57,0 +57,0 @@

src/utilities/Visible/index.jsx

@@ -7,2 +7,3 @@ /* global window */
 import * as style from './style';
+import { getConfiguration } from '../../config';
 import { getScreenClass } from '../../utils';
@@ -38,7 +39,2 @@
 
-  static contextTypes = {
-    serverSideScreenClass: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-    breakpoints: PropTypes.arrayOf(PropTypes.number),
-  };
-
   static defaultProps = {
@@ -52,7 +48,11 @@ xs: false,
 
-  componentWillMount = () => {
-    this.setScreenClass();
+  constructor(props) {
+    super(props);
+    this.state = {
+      screenClass: getConfiguration().defaultScreenClass,
+    };
   }
 
   componentDidMount = () => {
+    this.setScreenClass();
     this.eventListener = throttle(this.setScreenClass, 100);
@@ -68,3 +68,3 @@ window.addEventListener('resize', this.eventListener);
   setScreenClass = () => {
-    this.setState({ screenClass: getScreenClass(this.context) });
+    this.setState({ screenClass: getScreenClass() });
   }
@@ -71,0 +71,0 @@

src/utils.js

 /* global window */
 /* eslint "no-console": "off" */
 
+import { getConfiguration } from './config';
+
 const getViewPort = () => {
@@ -13,22 +15,13 @@ if (typeof window !== 'undefined' && window.innerWidth) {
 
-export const defaultBreakpoints = [576, 768, 992, 1200];
+export const getScreenClass = () => {
+  const { breakpoints, defaultScreenClass } = getConfiguration();
+  let screenClass = defaultScreenClass;
 
-export const defaultContainerWidths = [540, 750, 960, 1140];
-
-export const defaultGutterWidth = 30;
-
-export const defaultGridColumns = 12;
-
-export const getScreenClass = ({ serverSideScreenClass, breakpoints }) => {
-  const theBreakpoints = breakpoints && breakpoints.length ? breakpoints : defaultBreakpoints;
-
-  let screenClass = serverSideScreenClass || 'xl';
-
   const viewport = getViewPort();
   if (viewport) {
     screenClass = 'xs';
-    if (theBreakpoints[0] && viewport >= theBreakpoints[0]) screenClass = 'sm';
-    if (theBreakpoints[1] && viewport >= theBreakpoints[1]) screenClass = 'md';
-    if (theBreakpoints[2] && viewport >= theBreakpoints[2]) screenClass = 'lg';
-    if (theBreakpoints[3] && viewport >= theBreakpoints[3]) screenClass = 'xl';
+    if (breakpoints[0] && viewport >= breakpoints[0]) screenClass = 'sm';
+    if (breakpoints[1] && viewport >= breakpoints[1]) screenClass = 'md';
+    if (breakpoints[2] && viewport >= breakpoints[2]) screenClass = 'lg';
+    if (breakpoints[3] && viewport >= breakpoints[3]) screenClass = 'xl';
   }
@@ -35,0 +28,0 @@

No alert changes

Improved metrics

Number of package files

35

increased by6.06%

Lines of code

1639

increased by0.37%

Number of lines in readme file

137

increased by15.13%

Worsened metrics

Total package byte prevSize

71672

decreased by-1.73%

Dependency changes

• Updatedlodash@^4.17.10