react-flexbox - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

examples/index.jsx

@@ -10,6 +10,24 @@ import '6to5/polyfill';
     return (
-      <FlexRow>
-        <FlexColumn>Column 1</FlexColumn>
-        <FlexColumn>Column 2</FlexColumn>
-      </FlexRow>
+      <FlexColumn className="border" height="100vh">
+        <FlexRow height="50px" style={{alignItems: 'center', alignSelf: 'center'}}>Fully centered header</FlexRow>
+        <FlexRow className="red">
+          <FlexColumn className="border">Column 1</FlexColumn>
+          <FlexColumn>Column 2</FlexColumn>
+        </FlexRow>
+        <FlexRow>
+          <FlexColumn className="green" width="30%">30% Width</FlexColumn>
+          <FlexColumn width="60%" style={{background: 'gray'}}>60% Width</FlexColumn>
+          <FlexColumn>Remaining width. This small column will wrap</FlexColumn>
+        </FlexRow>
+        <FlexRow height="100px" className="red">
+          <FlexColumn width="50%">50% Width</FlexColumn>
+          <FlexColumn width="30%">30% Width</FlexColumn>
+          <FlexColumn>Remaining width</FlexColumn>
+        </FlexRow>
+        <FlexRow style={{alignItems: 'center'}}>
+          <FlexColumn width={2}>Twice the size of the others, the width is set without a unit.</FlexColumn>
+          <FlexColumn widht={1}>other 1</FlexColumn>
+          <FlexColumn width={1}>other 2</FlexColumn>
+        </FlexRow>
+      </FlexColumn>
     );
@@ -19,2 +37,2 @@ }
 
-React.renderComponent(<HelloWorld />, document.body);
+React.render(<HelloWorld />, document.body);

lib/index.jsx

@@ -8,4 +8,6 @@ var React = require('react');
   flexGrow: 1,
-  justifyContent: 'flex-start',
-  alignContent: 'flex-start',
+  flexShrink: 0,
+  flexBasis: 0,
+  justifyContent: 'space-between',
+  alignContent: 'space-between',
   alignItems: 'stretch'
@@ -15,9 +17,17 @@ };
 
-class FlexColumn {
-  render() {
-    let divStyle = {
-      flexDirection: 'column'
-    };
+const FlexMixin = {
+  propTypes: {
+    className: React.PropTypes.string,
+    height: React.PropTypes.string,
+    style: React.PropTypes.object,
+    width: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number])
+  },
 
-    if (this.props.width) {
+
+  mixProps(style) {
+    const divStyle = {};
+
+    if (typeof this.props.width === 'number') {
+      divStyle.flexGrow = this.props.width;
+    } else if (this.props.width) {
       divStyle.flexBasis = 'auto';
@@ -36,14 +46,32 @@ divStyle.flexGrow = 0;
 
-    const style = Object.assign({}, flexStyle, divStyle);
+    if (this.props.style) {
+      return Object.assign({}, flexStyle, style, divStyle, this.props.style);
+    } else {
+      return Object.assign({}, flexStyle, style, divStyle);
+    }
+  }
+};
 
+
+export const FlexColumn = React.createClass({
+  mixins: [FlexMixin],
+
+
+  render() {
+    let divStyle = {
+      flexDirection: 'column'
+    };
+    const style = this.mixProps(divStyle);
+
     return (
-      <div style={style}>{this.props.children}</div>
+      <div className={this.props.className} style={style}>{this.props.children}</div>
     );
   }
-}
-// Unfortunatly we need to do this.
-FlexColumn.prototype.displayName = 'FlexColumn';
+});
 
 
-class FlexRow {
+export const FlexRow = React.createClass({
+  mixins: [FlexMixin],
+
+
   render() {
@@ -53,22 +81,8 @@ let divStyle = {
     };
+    const style = this.mixProps(divStyle);
 
-    if (this.props.height) {
-      divStyle.flexBasis = 'auto';
-      divStyle.flexGrow = 0;
-      divStyle.flexShrink = 0;
-      divStyle.height = this.props.height;
-    }
-
-    const style = Object.assign({}, flexStyle, divStyle);
-
     return (
-      <div style={style}>{this.props.children}</div>
+      <div className={this.props.className} style={style}>{this.props.children}</div>
     );
   }
-}
-// Unfortunatly we need to do this.
-FlexRow.prototype.displayName = 'FlexRow';
-
-
-export var FlexColumn = React.createClass(FlexColumn.prototype);
-export var FlexRow = React.createClass(FlexRow.prototype);
+});

package.json

 {
   "name": "react-flexbox",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React flexbox implementation",
@@ -5,0 +5,0 @@ "author": "Thomas Coopman @tcoopman",

README.md

 # React-flexbox
 
 Implementation of css flexbox in react with inline styles.
+It is written in ES6 and requires an ES6 to ES5 transpiler. If there is need for
+it I can add a transpiled version to the repo.
 
 # API
 
-## FlexRow
+## Components
 
-## FlexColumn
+### FlexRow
 
+A flex row
+
+### FlexColumn
+
+A flex column
+
+## Props
+
+All props are optional and can be set on both components.
+
+### className
+
+must be a string
+
+### height
+
+_height_ must be a string with a valid css unit.
+
+### style
+
+Will be merged the flex style. This allows you to override the style.
+
+### width
+
+_width_ can be either a number `width={2}`, this acts as _flex-grow_ or a string
+with a unit (for example _%_ or _px_) - it must be a valid css unit.
+
 # Examples
@@ -12,0 +41,0 @@

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

5776

increased by55.65%

Number of package files

8

increased by14.29%

Lines of code

137

increased by37%

Number of lines in readme file

46

increased by170.59%

No dependency changes