react-break - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

lib/react-break.js

@@ -8,2 +8,10 @@ 'use strict';
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
 var _keys = require('babel-runtime/core-js/object/keys');
@@ -39,6 +47,9 @@
     children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.node), _react2.default.PropTypes.node]),
+    className: _react2.default.PropTypes.string,
+    forceWrap: _react2.default.PropTypes.bool,
     query: _react2.default.PropTypes.shape({
       method: _react2.default.PropTypes.oneOf((0, _keys2.default)(breakJsMethodMap)),
       breakpoint: _react2.default.PropTypes.string.isRequired
-    })
+    }),
+    style: _react2.default.PropTypes.object
   },
@@ -69,15 +80,21 @@
     var query = _props.query;
+    var style = _props.style;
+    var forceWrap = _props.forceWrap;
     var layout = this.state.layout;
 
 
-    var method = getMethodFromLayout(layout, query.method);
     var breakpoint = query.breakpoint;
 
-    var renderChildren = _react2.default.Children.count(children) > 1 || typeof children === 'string' ? _react2.default.createElement(
+    if (!getMethodFromLayout(layout, query.method)(breakpoint)) {
+      return null;
+    }
+
+    var classes = 'react-break react-break--' + query.method + '-' + query.breakpoint;
+    var shouldBeWrapped = forceWrap || _react2.default.Children.count(children) > 1 || (typeof children === 'undefined' ? 'undefined' : (0, _typeof3.default)(children)) !== 'object';
+
+    return shouldBeWrapped ? _react2.default.createElement(
       'div',
-      null,
+      { className: classes, style: style },
       children
     ) : children;
-
-    return method(breakpoint) ? renderChildren : null;
   }
@@ -103,3 +120,5 @@ });
           Break,
-          { breakpoints: breakpoints, query: { method: method, breakpoint: breakpoint } },
+          (0, _extends3.default)({}, this.props, {
+            breakpoints: breakpoints,
+            query: { method: method, breakpoint: breakpoint } }),
           children
@@ -106,0 +125,0 @@ ) : null;

package.json

 {
   "name": "react-break",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Responsive breakpoints in React.",
@@ -5,0 +5,0 @@ "main": "./lib/react-break.js",

README.md

@@ -109,5 +109,12 @@ # react-break
 
-## Options
+## Props
 
-`Break` component takes two attributes, `breakpoints` and `query`.
+__`forceWrap`__: Set to `true` if you want the layout components to create
+a wrapping div also for single child elements. By default the component creates
+a wrapper only for multiple child elements. Note that setting `style`
+or `className` props has no effects without a wrapping div.
+
+### Break component props
+
+`Break` component takes two props, `breakpoints` and `query`.
 Breakpoints are key-value pairs of arbitrary names and values for
@@ -114,0 +121,0 @@ layout breakpoints of your choice. Query has two properties:

src/react-break.jsx

@@ -21,2 +21,4 @@ import React from 'react';
     ]),
+    className: React.PropTypes.string,
+    forceWrap: React.PropTypes.bool,
     query: React.PropTypes.shape({
@@ -26,2 +28,3 @@ method: React.PropTypes.oneOf(Object.keys(breakJsMethodMap)),
     }),
+    style: React.PropTypes.object,
   },
@@ -57,2 +60,4 @@
       query,
+      style,
+      forceWrap,
     } = this.props;
@@ -64,11 +69,16 @@
 
-    const method = getMethodFromLayout(layout, query.method);
     const breakpoint = query.breakpoint;
 
-    const renderChildren =
-      (React.Children.count(children) > 1 || typeof children === 'string')
-      ? <div>{children}</div>
+    if (!getMethodFromLayout(layout, query.method)(breakpoint)) {
+      return null;
+    }
+
+    const classes = `react-break react-break--${query.method}-${query.breakpoint}`;
+    const shouldBeWrapped = forceWrap ||
+      React.Children.count(children) > 1 ||
+      typeof children !== 'object';
+
+    return shouldBeWrapped
+      ? <div className={classes} style={style}>{children}</div>
       : children;
-
-    return method(breakpoint) ? renderChildren : null;
   },
@@ -98,3 +108,6 @@ });
         return children ? (
-          <Break breakpoints={breakpoints} query={{ method, breakpoint }}>
+          <Break
+            {...this.props}
+            breakpoints={breakpoints}
+            query={{ method, breakpoint }}>
             {children}
@@ -101,0 +114,0 @@ </Break>

No alert changes

Improved metrics

Total package byte prevSize

14109

10.43%

Lines of code

213

13.9%

Number of lines in readme file

148

4.96%

No dependency changes