react-grid-system - npm Package Compare versions

Comparing version 2.4.1 to 2.5.0

build/grid/Col/index.js

@@ -137,2 +137,3 @@ 'use strict';
   tablet: _react2.default.PropTypes.bool,
+  serverSideScreenClass: _react2.default.PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   breakpoints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number),
@@ -139,0 +140,0 @@ gutterWidth: _react2.default.PropTypes.number

build/grid/Container/index.js

@@ -97,2 +97,3 @@ 'use strict';
   tablet: _react2.default.PropTypes.bool,
+  serverSideScreenClass: _react2.default.PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   breakpoints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number),
@@ -99,0 +100,0 @@ containerWidths: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number),

build/utilities/Hidden/index.js

@@ -105,2 +105,3 @@ 'use strict';
   tablet: _react2.default.PropTypes.bool,
+  serverSideScreenClass: _react2.default.PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   breakpoints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)
@@ -107,0 +108,0 @@ };

build/utilities/ScreenClassRender/index.js

@@ -90,4 +90,5 @@ 'use strict';
   tablet: _react2.default.PropTypes.bool,
+  serverSideScreenClass: _react2.default.PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   breakpoints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)
 };
 exports.default = ScreenClassRender;

build/utilities/Visible/index.js

@@ -105,2 +105,3 @@ 'use strict';
   tablet: _react2.default.PropTypes.bool,
+  serverSideScreenClass: _react2.default.PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   breakpoints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)
@@ -107,0 +108,0 @@ };

build/utils.js

@@ -7,14 +7,9 @@ 'use strict';
 /* global window */
+/* eslint "no-console": "off" */
 
-var getViewPort = function getViewPort(_ref) {
-  var phone = _ref.phone,
-      tablet = _ref.tablet;
-
-  var viewport = 1600;
-  if (tablet) viewport = 768; // iPad portrait width
-  if (phone) viewport = 375; // iPhone 6 width
+var getViewPort = function getViewPort() {
   if (typeof window !== 'undefined' && window.innerWidth) {
-    viewport = window.innerWidth;
+    return window.innerWidth;
   }
-  return viewport;
+  return null;
 };
@@ -30,16 +25,28 @@
 
-var getScreenClass = exports.getScreenClass = function getScreenClass(_ref2) {
-  var phone = _ref2.phone,
-      tablet = _ref2.tablet,
-      breakpoints = _ref2.breakpoints;
+var getScreenClass = exports.getScreenClass = function getScreenClass(_ref) {
+  var phone = _ref.phone,
+      tablet = _ref.tablet,
+      serverSideScreenClass = _ref.serverSideScreenClass,
+      breakpoints = _ref.breakpoints;
 
+  if (typeof phone !== 'undefined') {
+    console.error('react-grid-system: Context type "phone" is deprecated, please use "serverSideScreenClass" instead.');
+  }
+  if (typeof tablet !== 'undefined') {
+    console.error('react-grid-system: Context type "tablet" is deprecated, please use "serverSideScreenClass" instead.');
+  }
   var theBreakpoints = breakpoints && breakpoints.length ? breakpoints : defaultBreakpoints;
-  var viewport = getViewPort({ phone: phone, tablet: tablet });
 
-  var screenClass = 'xs';
+  var screenClass = serverSideScreenClass || 'xl';
+  if (phone) screenClass = 'xs';
+  if (tablet) screenClass = 'md';
 
-  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';
+  var viewport = getViewPort({ phone: phone, tablet: tablet });
+  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';
+  }
 
@@ -46,0 +53,0 @@ return screenClass;

package.json

 {
   "name": "react-grid-system",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "A no CSS Bootstrap-like responsive grid system for React.",
@@ -54,5 +54,5 @@ "main": "./build/index.js",
     "react-styleguidist": "^4.6.3",
-    "rimraf": "^2.5.4",
+    "rimraf": "^2.6.0",
     "webpack": "^2.2.1"
   }
 }

README.md

@@ -15,3 +15,3 @@ # react-grid-system
 `react-grid-system` provides a responsive grid similar to Bootstrap (see: http://getbootstrap.com/css/#grid),
-except here React components are used, and **no CSS** is needed at all.
+except here, it's React components only, and **no CSS** is used at all.
 
@@ -85,3 +85,3 @@ Three components are provided for creating responsive grids: `Container`, `Row`, and `Col`.
 
-<ScreenClassRender style={styleFunction}><p>Some text</p></ScreenClassRender>
+<ScreenClassRender style={styleFunction}><p>Some text which font size depends on the screen class.</p></ScreenClassRender>
 ```
@@ -95,7 +95,8 @@
 | ----------------- | ------------------ | ------------------------------ |
-| `phone`           | `false`            | When set to `true`, a default viewport width of 375 pixels will be used, in case the viewport width cannot be determined by using the `window` object. This is useful for server-side rendering. |
-| `tablet`          | `false`            | When set to `true`, a default viewport width of 768 pixels will be used, in case the viewport width cannot be determined by using the `window` object. This is useful for server-side rendering. |
 | `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. |
 | `containerWidths` | `[540, 750, 960, 1140]` | The container widths in pixels of devices in screen class `sm`, `md`, `lg`, and `xl`. The default values are based on the Bootstrap 4 container widths. |
 | `gutterWidth` | `30` | The gutter width in pixels. A gutter width of 30 means 15px on each side of a column. The default value is based on the Bootstrap 4 gutter width. |
+| `serverSideScreenClass` | `sm` | The screen class used when the view port cannot be determined using `window`. This is useful for server-side rendering based on the user agent. See also the example application below. |
+| `phone`           | `false`            | *deprecated* When set to `true`, a default viewport width of 375 pixels will be used, in case the viewport width cannot be determined by using the `window` object. This is useful for server-side rendering. |
+| `tablet`          | `false`            | *deprecated* When set to `true`, a default viewport width of 768 pixels will be used, in case the viewport width cannot be determined by using the `window` object. This is useful for server-side rendering. |
 
@@ -102,0 +103,0 @@ ## Example Application and Documentation

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

42104

increased by2.72%

Lines of code

766

increased by1.73%

Number of lines in readme file

110

increased by0.92%

No dependency changes