New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-grid-system

Package Overview
Dependencies
Maintainers
2
Versions
132
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-grid-system - npm Package Compare versions

Comparing version

2.5.0
to
2.6.0

build/utilities/ClearFix/index.js
build/utilities/ClearFix/style.css.js

16

build/grid/Row/index.js

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

var _ClearFix = require('../../utilities/ClearFix');
var _ClearFix2 = _interopRequireDefault(_ClearFix);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -26,3 +30,3 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint react/prefer-stateless-function: "off" */
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

@@ -57,11 +61,3 @@ var Row = function (_React$Component) {

children,
_react2.default.createElement(
'div',
{ style: (0, _style.getAfterStyle)() },
_react2.default.createElement(
'span',
{ style: (0, _style.getAfterContentStyle)() },
'\xA0'
)
)
_react2.default.createElement(_ClearFix2.default, { xs: true, sm: true, md: true, lg: true, xl: true })
);

@@ -68,0 +64,0 @@ }, _temp), _possibleConstructorReturn(_this, _ret);

14

build/grid/Row/style.css.js

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

});
exports.getAfterContentStyle = exports.getAfterStyle = undefined;

@@ -23,15 +22,2 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

}, moreStyle);
};
var getAfterStyle = exports.getAfterStyle = function getAfterStyle() {
return {
display: 'table',
clear: 'both'
};
};
var getAfterContentStyle = exports.getAfterContentStyle = function getAfterContentStyle() {
return {
display: 'none'
};
};

7

build/index.js

@@ -6,3 +6,3 @@ 'use strict';

});
exports.ScreenClassRender = exports.Visible = exports.Hidden = exports.Row = exports.Container = exports.Col = undefined;
exports.ScreenClassRender = exports.Visible = exports.Hidden = exports.ClearFix = exports.Row = exports.Container = exports.Col = undefined;

@@ -21,2 +21,6 @@ var _Col2 = require('./grid/Col');

var _ClearFix2 = require('./utilities/ClearFix');
var _ClearFix3 = _interopRequireDefault(_ClearFix2);
var _Hidden2 = require('./utilities/Hidden');

@@ -43,4 +47,5 @@

exports.ClearFix = _ClearFix3.default;
exports.Hidden = _Hidden3.default;
exports.Visible = _Visible3.default;
exports.ScreenClassRender = _ScreenClassRender3.default;

2

package.json
{
"name": "react-grid-system",
"version": "2.5.0",
"version": "2.6.0",
"description": "A no CSS Bootstrap-like responsive grid system for React.",

@@ -5,0 +5,0 @@ "main": "./build/index.js",

25

README.md

@@ -72,3 +72,3 @@ # react-grid-system

Next to that, the `ScreenClassRender` utility is provided, for rendering a component differently based on the screen class.
Next to that, the `ScreenClassRender` component is provided, for rendering a component differently based on the screen class.
An example on how to use this:

@@ -88,2 +88,19 @@

Finally, a `ClearFix` component can be used for resetting a row. This is sometimes needed when not all columns have the same height. For example:
```html
<Row>
<Col xs={6} sm={3}>
xs=6 sm=3<br />
This column has a lot more height, so a clearfix is needed for screenclass xs.
</Col>
<Col xs={6} sm={3}>xs=6 sm=3</Col>
<ClearFix xs />
<Col xs={6} sm={3}>xs=6 sm=3</Col>
<Col xs={6} sm={3}>xs=6 sm=3</Col>
</Row>
```
## Context types

@@ -98,5 +115,5 @@

| `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. |
| `serverSideScreenClass` | `xl` | 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 server-side screen class of `xs` will be used. |
| `tablet` | `false` | *deprecated* When set to `true`, a server-side screen class of `md` will be used. |

@@ -103,0 +120,0 @@ ## Example Application and Documentation