react-flexr - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

CHANGELOG.md

@@ -13,2 +13,6 @@ # Changelog
 
+## 2.0.1
+  * [Bug Fix]
+    * `react-flexr` now works correctly with `stilr@^1.2.1`
+
 ## 2.0.0
@@ -15,0 +19,0 @@ * __[Breaking Change]__

dist/stylesheet.js

@@ -1,10 +0,16 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
+Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _stilr = require('stilr');
+
+var _stilr2 = _interopRequireDefault(_stilr);
+
 // Used as Stilr StyleSheet
-var stylesheet = new Map();
-exports["default"] = stylesheet;
-module.exports = exports["default"];
+var stylesheet = new (_stilr2['default'].Map || Map)();
+exports['default'] = stylesheet;
+module.exports = exports['default'];

lib/stylesheet.js

@@ -0,4 +1,5 @@
+import StyleSheet from 'stilr';
 
 // Used as Stilr StyleSheet
-const stylesheet = new Map();
+const stylesheet = new ( StyleSheet.Map || Map )();
 export default stylesheet;

package.json

 {
   "name": "react-flexr",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "React flexbox grid made simple.",
@@ -24,2 +24,3 @@ "main": "dist",
     "react-hot-loader": "^1.2.7",
+    "semver": "^5.0.1",
     "webpack": "^1.9.4",
@@ -30,3 +31,3 @@ "webpack-dev-server": "^1.8.2"
     "react": ">=0.11.0",
-    "stilr": "^1.0.0"
+    "stilr": "^1.2.1"
   },
@@ -33,0 +34,0 @@ "repository": "chriskjaer/react-flexr",

README.md

@@ -1,4 +0,4 @@
-# Flexr [![Build Status](https://travis-ci.org/chriskjaer/react-flexr.svg)](https://travis-ci.org/chriskjaer/react-flexr) [![npm version](https://badge.fury.io/js/react-flexr.svg)](http://badge.fury.io/js/react-flexr)
+# Flexr [![Build Status](https://travis-ci.org/kodyl/react-flexr.svg)](https://travis-ci.org/kodyl/react-flexr) [![npm version](https://badge.fury.io/js/react-flexr.svg)](http://badge.fury.io/js/react-flexr)
 
-React Flexbox grid made simple.
+React Flexbox grid made simple. :muscle:
 Based on the [ "Solved-by-flexbox"-grid ]( http://philipwalton.github.io/solved-by-flexbox/demos/grids/ )
@@ -26,8 +26,6 @@
 ```
-*If you don't use webpack with css-loader, make sure to include the react-flexr/styles.css somewhere in your project.
+**If you don't use webpack with css-loader, make sure to include the `react-flexr/styles.css` somewhere in your project. For more advanced use cases, the [Stilr](https://github.com/chriskjaer/stilr)
+stylesheet is also exposed.**
 
-For more advanced use cases, the [Stilr](https://github.com/chriskjaer/stilr)
-stylesheet is also exposed.*
 
-
 Cell sizes can be controlled with fractions.
@@ -55,3 +53,3 @@ ```javascript
         <Cell palm='3/12' lap='1/2'>
-          Fills on mobile, half on lap and dynamic size everywhere else.
+          Fills a quarter on palm (mobile), half on lap and dynamicly sized everywhere else.
         <Cell>
@@ -77,3 +75,3 @@
   gutter={ string }   // Override default gutter: '1em', '5%', '10px', etc.
-  Propagates downwards. Cells inside this Grid component will use the same gutter.
+                      //   Propagates downwards. Cells inside this Grid component will use the same gutter.
   flexCells={ bool }  // All sub cells will be full height
@@ -95,3 +93,3 @@ />
   portable={ string } // Like size, but only applies for ( palm + lap )
-  devices.*
+                      //   devices.*
   desk={ string }     // Like size, but only applies for desk devices.*
@@ -119,9 +117,11 @@ />
 ## Flexr Helpers
-Use these to get the most out of Flexr.
+Use these to get the most out of Flexr. Especially `findMatch` is very useful when you need to add different behaviour based on window width outside of the grid/cell elements.
 
 #### `string|false findMatch(string arguments)`
 This is the internal function that Flexr uses to check which ergonomic state
-it's currently in. It's usefull if you have components outside the grid that you
-want to show/hide/manipulate props.
+it's currently in. It's really useful if you have components outside the grid, that you
+want to show/hide/manipulate passed properties or stuff in your lifecycle hooks.
 
+The function accepts multipe ergonomic breakpoints as strings and returns the first one matched or false if nothing matches.
+
 __Example__
@@ -128,0 +128,0 @@ ```javascript

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40232

increased by3.38%

Lines of code

764

increased by0.53%

Worsened metrics

Dev dependency count

10

increased by11.11%

Dependency changes

• Updatedstilr@^1.2.1