2.2.0 release

Author: rofrischmann

Changelog.md

@@ -1,6 +1,11 @@
 # Changelog
 
 ## 2.0
+### 2.2.0
+* Replaced [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer) with lightweight [inline-style-prefix-all](https://github.com/rofrischmann/inline-style-prefix-all)
+  * adds server-side rendering support for every Component
+* `width` and `height` from `<ScrollView>` now longer are required
+
 ### 2.1.2
 * fixed shorthand Components
 

README.md

@@ -5,7 +5,7 @@ npm install react-layout-components
 Useful, Modern and universal layout Components for [React.js](https://facebook.github.io/react/) based on flexbox.<br>
 
 The basis `<Box>` Component is highly inspired by [React Native](https://facebook.github.io/react-native/)'s [Flexbox](https://facebook.github.io/react-native/docs/flexbox.html#content) implementation and though accepts almost the same props.
-It supports all flexbox specifications and automatically adds alternative values and prefixes thanks to [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer) if needed.
+It supports all flexbox specifications and automatically adds alternative values and prefixes thanks to [inline-style-prefix-all](https://github.com/rofrischmann/inline-style-prefix-all) if needed.
 
 > **Note**: If you're not familiar with Flexbox at all, I recommend [css-tricks 'Complete Guide to Flexbox'](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) which is an awesome source for beginners as well as a nice refreshment for experts.
 
@@ -84,7 +84,7 @@ Browser default values don't need to be set explicit and are defined as
 ```
 
 ## Container
-Container is a Component to style [Box-model](https://css-tricks.com/the-css-box-model/)
+Container is a Component to style [box-model](https://css-tricks.com/the-css-box-model/)
  properties.
 
 ### Props
@@ -116,14 +116,13 @@ There are some shortcut properties. They do not accept a value. e.g.
 Page is just a shortcut for a page-filling Component. It also is fixed to the edges of your WebView.
 
 ## ScrollView
-ScrollView is a scrollable container. You **must** set both `height` and `width` to achieve a scrollable container.
-
+ScrollView is a scrollable container. It is build on the `<Box>`-Component, which let's you either use default box-model sizing or flexbox sizing.
 ### Props
 
 | Property         | Description                             | Options         
 | ---------------- | --------------------------------------- | -------------------- |
-| height           | container height                        | required
-| width            | container width                         | required
+| height           | container height                        |
+| width            | container width                         |
 | horizontal       | enables horizontal scrollable container | `boolean`
 | initialScrollPos | scroll position                         | `number`
 | onScroll         | gets fired on scrolling                 | `function`

modules/components/Box.jsx

@@ -1,9 +1,7 @@
 import React, { Component } from 'react'
-import Prefixer from 'inline-style-prefixer'
+import prefixAll from 'inline-style-prefix-all'
 import warn from '../utils/warn'
 
-const prefixer = new Prefixer()
-
 /**
  * Flexbox Component
  */
@@ -69,8 +67,8 @@ export default class Box extends Component {
     })
 
     // processing styles and normalizing flexbox specifications
-    prefixer.prefix(styles)
+    const prefixedStyles = prefixAll(styles)
 
-    return <div {...props} style={{...styles, ...props.style}}>{props.children}</div>
+    return <div {...props} style={{...prefixedStyles, ...props.style}}>{props.children}</div>
   }
 }

modules/components/ScrollView.jsx

@@ -11,8 +11,8 @@ export default class ScrollView extends Component {
     initialScrollPos: 0
   }
   static propTypes = {
-    width: PropTypes.any.isRequired,
-    height: PropTypes.any.isRequired,
+    width: PropTypes.any,
+    height: PropTypes.any,
     horizontal: PropTypes.bool,
     initialScrollPos: PropTypes.number
   }