react-grid-system - npm Package Compare versions

Comparing version 4.1.7 to 4.2.0

build/grid/Col/index.js

@@ -77,3 +77,4 @@ 'use strict';
           style = _this$props.style,
-          otherProps = _objectWithoutProperties(_this$props, ['children', 'xs', 'sm', 'md', 'lg', 'xl', 'offset', 'pull', 'push', 'debug', 'style']);
+          component = _this$props.component,
+          otherProps = _objectWithoutProperties(_this$props, ['children', 'xs', 'sm', 'md', 'lg', 'xl', 'offset', 'pull', 'push', 'debug', 'style', 'component']);
 
@@ -93,7 +94,3 @@ var theStyle = (0, _style2.default)({
       });
-      return _react2.default.createElement(
-        'div',
-        _extends({ style: theStyle }, otherProps),
-        children
-      );
+      return (0, _react.createElement)(component, _extends({ style: theStyle }, otherProps, { children: children }));
     };
@@ -182,3 +179,7 @@
    */
-  debug: _propTypes2.default.bool
+  debug: _propTypes2.default.bool,
+  /**
+   * Use your own component
+   */
+  component: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.string])
 };
@@ -196,4 +197,5 @@ Col.defaultProps = {
   style: {},
-  debug: false
+  debug: false,
+  component: 'div'
 };
 exports.default = Col;

build/grid/Container/index.js

@@ -72,3 +72,4 @@ 'use strict';
           style = _this$props.style,
-          otherProps = _objectWithoutProperties(_this$props, ['children', 'fluid', 'xs', 'sm', 'md', 'lg', 'xl', 'style']);
+          component = _this$props.component,
+          otherProps = _objectWithoutProperties(_this$props, ['children', 'fluid', 'xs', 'sm', 'md', 'lg', 'xl', 'style', 'component']);
 
@@ -87,8 +88,5 @@ var theStyle = (0, _style2.default)({
       });
-      return _react2.default.createElement(
-        'div',
-        _extends({ style: theStyle }, otherProps),
-        children,
-        _react2.default.createElement('span', { style: (0, _style.getAfterStyle)() })
-      );
+      return (0, _react.createElement)(component, _extends({
+        style: theStyle
+      }, otherProps), [children, _react2.default.createElement('span', { style: (0, _style.getAfterStyle)() })]);
     };
@@ -142,3 +140,7 @@
    */
-  style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]))
+  style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])),
+  /**
+   * Use your own component
+   */
+  component: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.string])
 };
@@ -152,4 +154,5 @@ Container.defaultProps = {
   xl: false,
-  style: {}
+  style: {},
+  component: 'div'
 };
 exports.default = Container;

build/grid/Row/index.js

@@ -57,3 +57,4 @@ 'use strict';
           nogutter = _this$props.nogutter,
-          otherProps = _objectWithoutProperties(_this$props, ['children', 'style', 'align', 'debug', 'nogutter']);
+          component = _this$props.component,
+          otherProps = _objectWithoutProperties(_this$props, ['children', 'style', 'align', 'debug', 'nogutter', 'component']);
 
@@ -66,11 +67,7 @@ var theStyle = (0, _style2.default)({
       });
-      return _react2.default.createElement(
-        'div',
-        _extends({ style: theStyle }, otherProps),
-        _react2.default.createElement(
-          NoGutterContext.Provider,
-          { value: _this.props.nogutter },
-          children
-        )
-      );
+      return _react2.default.createElement(component, _extends({ style: theStyle }, otherProps), _react2.default.createElement(
+        NoGutterContext.Provider,
+        { value: nogutter },
+        children
+      ));
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -102,3 +99,7 @@ }
     */
-  debug: _propTypes2.default.bool
+  debug: _propTypes2.default.bool,
+  /**
+   * Use your own component
+   */
+  component: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.string])
 };
@@ -109,4 +110,5 @@ Row.defaultProps = {
   style: {},
-  debug: false
+  debug: false,
+  component: 'div'
 };
 exports.default = Row;

package.json

 {
   "name": "react-grid-system",
-  "version": "4.1.7",
+  "version": "4.2.0",
   "description": "A powerful Bootstrap-like responsive grid system for React.",
@@ -5,0 +5,0 @@ "main": "./build/index.js",

src/grid/Col/index.jsx

 /* global window */
 
-import React from 'react';
+import React, { createElement } from 'react';
 import PropTypes from 'prop-types';
@@ -78,2 +78,9 @@ import throttle from 'lodash/throttle';
     debug: PropTypes.bool,
+    /**
+     * Use your own component
+     */
+    component: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string,
+    ]),
   };
@@ -93,2 +100,3 @@
     debug: false,
+    component: 'div',
   }
@@ -120,3 +128,3 @@
     const {
-      children, xs, sm, md, lg, xl, offset, pull, push, debug, style,
+      children, xs, sm, md, lg, xl, offset, pull, push, debug, style, component,
       ...otherProps
@@ -137,7 +145,3 @@ } = this.props;
     });
-    return (
-      <div style={theStyle} {...otherProps}>
-        {children}
-      </div>
-    );
+    return createElement(component, { style: theStyle, ...otherProps, children });
   };
@@ -144,0 +148,0 @@

src/grid/Container/index.jsx

 /* global window */
 
-import React from 'react';
+import React, { createElement } from 'react';
 import PropTypes from 'prop-types';
@@ -52,2 +52,9 @@ import throttle from 'lodash/throttle';
     ])),
+    /**
+     * Use your own component
+     */
+    component: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string,
+    ]),
   };
@@ -63,2 +70,3 @@
     style: {},
+    component: 'div',
   };
@@ -90,3 +98,3 @@
     const {
-      children, fluid, xs, sm, md, lg, xl, style, ...otherProps
+      children, fluid, xs, sm, md, lg, xl, style, component, ...otherProps
     } = this.props;
@@ -105,9 +113,9 @@ const theStyle = getStyle({
     });
-    return (
-      <div style={theStyle} {...otherProps}>
-        {children}
-        <span style={getAfterStyle()} />
-      </div>
-    );
+    return createElement(component, {
+      style: theStyle,
+      ...otherProps,
+    },
+    [children,
+      <span style={getAfterStyle()} />]);
   }
 }

src/grid/Row/index.jsx

@@ -33,2 +33,9 @@ import React from 'react';
     debug: PropTypes.bool,
+    /**
+     * Use your own component
+     */
+    component: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string,
+    ]),
   };
@@ -41,2 +48,3 @@
     debug: false,
+    component: 'div',
   }
@@ -46,3 +54,3 @@
     const {
-      children, style, align, debug, nogutter, ...otherProps
+      children, style, align, debug, nogutter, component, ...otherProps
     } = this.props;
@@ -55,10 +63,7 @@ const theStyle = getStyle({
     });
-    return (
-      <div style={theStyle} {...otherProps}>
-        <NoGutterContext.Provider value={this.props.nogutter}>
-          {children}
-        </NoGutterContext.Provider>
-      </div>
-    );
+    return React.createElement(component, { style: theStyle, ...otherProps },
+      <NoGutterContext.Provider value={nogutter}>
+        { children }
+      </NoGutterContext.Provider>);
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

71137

increased by1.59%

Lines of code

1631

increased by1.49%

No dependency changes