react-grid-system - npm Package Compare versions

Comparing version 3.1.3 to 3.2.0

build/grid/Col/index.js

@@ -86,3 +86,4 @@ 'use strict';
         gutterWidth: _this.context.gutterWidth,
-        moreStyle: style
+        moreStyle: style,
+        gridColumns: _this.context.gridColumns
       });
@@ -180,4 +181,5 @@ return _react2.default.createElement(
   breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number),
-  gutterWidth: _propTypes2.default.number
+  gutterWidth: _propTypes2.default.number,
+  gridColumns: _propTypes2.default.number
 };
 exports.default = Col;

build/grid/Col/style.js

@@ -17,6 +17,6 @@ 'use strict';
 
-var getWidth = function getWidth(width) {
+var getWidth = function getWidth(width, gridColumns) {
   if (typeof width !== 'number') return undefined;
   var colWidth = (0, _utils.normalizeColumnWidth)(width);
-  return 100 / 12 * colWidth + '%';
+  return 100 / gridColumns * colWidth + '%';
 };
@@ -36,5 +36,7 @@
       gutterWidth = _ref.gutterWidth,
-      moreStyle = _ref.moreStyle;
+      moreStyle = _ref.moreStyle,
+      gridColumns = _ref.gridColumns;
 
   var theGutterWidth = typeof gutterWidth === 'number' ? gutterWidth : _utils.defaultGutterWidth;
+  var theGridColumns = typeof gridColumns === 'number' ? gridColumns : _utils.defaultGridColumns;
 
@@ -66,7 +68,7 @@ var styles = _extends({
     if (_utils.screenClasses.indexOf(screenClass) >= index) {
-      styles.flexBasis = getWidth(width[size]) || styles.flexBasis;
-      styles.maxWidth = getWidth(width[size]) || styles.maxWidth;
-      styles.marginLeft = getWidth(offset[size]) || styles.marginLeft;
-      styles.right = getWidth(pull[size]) || styles.right;
-      styles.left = getWidth(push[size]) || styles.left;
+      styles.flexBasis = getWidth(width[size], theGridColumns) || styles.flexBasis;
+      styles.maxWidth = getWidth(width[size], theGridColumns) || styles.maxWidth;
+      styles.marginLeft = getWidth(offset[size], theGridColumns) || styles.marginLeft;
+      styles.right = getWidth(pull[size], theGridColumns) || styles.right;
+      styles.left = getWidth(push[size], theGridColumns) || styles.left;
     }
@@ -73,0 +75,0 @@ });

build/utils.js

@@ -24,2 +24,4 @@ 'use strict';
 
+var defaultGridColumns = exports.defaultGridColumns = 12;
+
 var getScreenClass = exports.getScreenClass = function getScreenClass(_ref) {
@@ -26,0 +28,0 @@ var serverSideScreenClass = _ref.serverSideScreenClass,

package.json

 {
   "name": "react-grid-system",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "description": "A no CSS Bootstrap-like responsive grid system for React.",
@@ -5,0 +5,0 @@ "main": "./build/index.js",

README.md

 # react-grid-system
-A no CSS Bootstrap-like responsive grid system for React.
+A powerful Bootstrap-like responsive grid system for React.
 
@@ -11,3 +11,3 @@ [![NPM version][version-image]][npm-url] [![Downloads][downloads-image]][npm-url]
 * [Context types](#context-types)
-* [API reference](#api-reference)
+* [API documentation](#api-documentation)
 * [Example application with SSR](#example-application-with-ssr)
@@ -28,3 +28,3 @@
 
-`react-grid-system` provides a responsive grid similar to Bootstrap (see: https://getbootstrap.com/docs/3.3/css/#grid), except here, it's React components only. Even no CSS or class names are used.
+`react-grid-system` provides a responsive grid similar to Bootstrap (see: https://getbootstrap.com/docs/4.1/layout/grid/). However, `react-grid-system` is purely React, even no CSS or class names are used. Moreover, it adds various powerful features, such as setting breakpoints and gutter widths through React's context.
 
@@ -51,2 +51,4 @@ Three components are provided for creating responsive grids: `Container`, `Row`, and `Col`.
 
+For all features of these components, please have a look at the API documentation: https://JSxMachina.github.io/react-grid-system/
+
 ### Responsive utilities
@@ -113,7 +115,8 @@
 | `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. |
+| `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. |
 
-## API reference
+## API documentation
 
-The API reference and further documentation of all components can be found at the GitHub pages: https://JSxMachina.github.io/react-grid-system/
+Extensive documentation of all components can be found at the GitHub pages: https://JSxMachina.github.io/react-grid-system/
 
@@ -120,0 +123,0 @@ ## Example application with SSR

src/grid/Col/index.jsx

@@ -96,2 +96,3 @@ /* global window */
     gutterWidth: PropTypes.number,
+    gridColumns: PropTypes.number,
   };
@@ -133,2 +134,3 @@
       moreStyle: style,
+      gridColumns: this.context.gridColumns,
     });
@@ -135,0 +137,0 @@ return (

src/grid/Col/style.js

@@ -1,9 +0,9 @@
-import { defaultGutterWidth, normalizeColumnWidth, screenClasses } from '../../utils';
+import { defaultGutterWidth, normalizeColumnWidth, screenClasses, defaultGridColumns } from '../../utils';
 
 const hasWidth = widths => Object.keys(widths).reduce((acc, cur) => acc || widths[cur], false);
 
-const getWidth = (width) => {
+const getWidth = (width, gridColumns) => {
   if (typeof width !== 'number') return undefined;
   const colWidth = normalizeColumnWidth(width);
-  return `${(100 / 12) * colWidth}%`;
+  return `${(100 / gridColumns) * colWidth}%`;
 };
@@ -20,4 +20,6 @@
   moreStyle,
+  gridColumns,
 }) => {
   const theGutterWidth = typeof gutterWidth === 'number' ? gutterWidth : defaultGutterWidth;
+  const theGridColumns = typeof gridColumns === 'number' ? gridColumns : defaultGridColumns;
 
@@ -50,7 +52,7 @@ const styles = {
     if (screenClasses.indexOf(screenClass) >= index) {
-      styles.flexBasis = getWidth(width[size]) || styles.flexBasis;
-      styles.maxWidth = getWidth(width[size]) || styles.maxWidth;
-      styles.marginLeft = getWidth(offset[size]) || styles.marginLeft;
-      styles.right = getWidth(pull[size]) || styles.right;
-      styles.left = getWidth(push[size]) || styles.left;
+      styles.flexBasis = getWidth(width[size], theGridColumns) || styles.flexBasis;
+      styles.maxWidth = getWidth(width[size], theGridColumns) || styles.maxWidth;
+      styles.marginLeft = getWidth(offset[size], theGridColumns) || styles.marginLeft;
+      styles.right = getWidth(pull[size], theGridColumns) || styles.right;
+      styles.left = getWidth(push[size], theGridColumns) || styles.left;
     }
@@ -57,0 +59,0 @@ });

src/utils.js

@@ -19,2 +19,4 @@ /* global window */
 
+export const defaultGridColumns = 12;
+
 export const getScreenClass = ({ serverSideScreenClass, breakpoints }) => {
@@ -21,0 +23,0 @@ const theBreakpoints = breakpoints && breakpoints.length ? breakpoints : defaultBreakpoints;

No alert changes

Improved metrics

Total package byte prevSize

75987

increased by1.4%

Lines of code

1703

increased by0.59%

Number of lines in readme file

127

increased by2.42%

No dependency changes