Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

react-material-responsive-grid

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-material-responsive-grid - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

@@ -58,6 +58,2 @@ 'use strict';

if (className) {
classNames.push(className);
}
// size specific properties

@@ -174,2 +170,7 @@ if (xs4) {

// specified class is added last
if (className) {
classNames.push(className);
}
if (classNames.length) {

@@ -176,0 +177,0 @@ newProps.className = classNames.filter(function (cssName) {

@@ -26,7 +26,19 @@ 'use strict';

fixed = _ref.fixed,
marginless = _ref.marginless,
tagName = _ref.tagName,
other = (0, _objectWithoutProperties3.default)(_ref, ['className', 'fixed', 'tagName']);
other = (0, _objectWithoutProperties3.default)(_ref, ['className', 'fixed', 'marginless', 'tagName']);
var classNames = [(0, _utils.getClass)('grid')];
if (fixed === 'left') {
classNames.push((0, _utils.getClass)('fixed-left'));
} else if (fixed === 'center') {
classNames.push((0, _utils.getClass)('fixed-center'));
}
if (marginless) {
classNames.push((0, _utils.getClass)('marginless'));
}
// specified class is added last
if (className) {

@@ -36,8 +48,2 @@ classNames.push(className);

if (fixed === 'left') {
classNames.push((0, _utils.getClass)('grid-fixed-left'));
} else if (fixed === 'center') {
classNames.push((0, _utils.getClass)('grid-fixed-center'));
}
return _react2.default.createElement(tagName, (0, _extends3.default)({

@@ -52,3 +58,4 @@ className: classNames.filter(function (cssName) {

className: _react.PropTypes.string,
fixed: _react.PropTypes.string,
fixed: _react.PropTypes.oneOf(['left', 'center']),
marginless: _react.PropTypes.bool,
tagName: _react.PropTypes.string

@@ -60,2 +67,3 @@ };

fixed: null,
marginless: false,
tagName: 'div'

@@ -62,0 +70,0 @@ };

@@ -39,6 +39,2 @@ 'use strict';

if (className) {
classNames.push(className);
}
if (reverse) {

@@ -58,2 +54,7 @@ classNames.push((0, _utils.getClass)('reverse'));

// specified class is added last
if (className) {
classNames.push(className);
}
return _react2.default.createElement(tagName || 'div', (0, _extends3.default)({

@@ -60,0 +61,0 @@ className: classNames.filter(function (cssName) {

{
"name": "react-material-responsive-grid",
"author": "Ken Gregory",
"version": "1.0.0",
"version": "1.1.0",
"description": "A set of React components implementing the material-responsive-grid CSS framework.",

@@ -22,3 +22,3 @@ "main": "./index.js",

"babel-runtime": "^6.23.0",
"material-responsive-grid": "^1.0.1",
"material-responsive-grid": "^1.1.0",
"react": "^15.4.2",

@@ -25,0 +25,0 @@ "react-dom": "^15.4.2"

@@ -5,2 +5,8 @@ # React Material Responsive Grid #

## Installation ##
```
npm i react-material-responsive-grid --save
```
## Components ##

@@ -15,12 +21,15 @@

- Adheres to [Material Design responsive UI](https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints) standards for screens at or exceeding 1600 px
- Fluid by default, allows the Grid to continue growing
- Fluid by default, allows the Grid to continue
- Margin by default, preserves the outer padding for outer columns, preventing a row of content from spanning edge to edge
- Optionally fixed width for viewports larger than 1599 px, centered or left aligned
- Optionally marginless, allow row content to span from edge to edge
#### Properties ####
Name | Default | Value | Description
--------- | ------- | ---------------------- | -----------------------------------------------------------------------------
fixed | | { *left* or *center* } | Grid is fixed width and aligned as specified for viewports larger than 1599px
tagName | *div* | | The type of tag to use when rendering this element
className | | | The CSS class name of this element
Name | Default | Value | Description
---------- | ------- | ---------------------- | -----------------------------------------------------------------------------
fixed | | { *left* or *center* } | Grid is fixed width and aligned as specified for viewports larger than 1599px
marginless | *false* | Boolean | Grid has no margin, row content can span edge to edge
tagName | *div* | | The type of tag to use when rendering this element
className | | | The CSS class name of this element

@@ -27,0 +36,0 @@