react-layouts - npm Package Compare versions

Comparing version 0.0.9 to 0.0.11

package.json

 {
   "name": "react-layouts",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "React UI Library for Layouts",
@@ -25,2 +25,3 @@ "main": "lib/index.js",
     "css-loader": "^0.23.0",
+    "extract-text-webpack-plugin": "^0.9.1",
     "jest": "^0.1.40",
@@ -42,3 +43,4 @@ "jsdom": "^7.1.1",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel ./src --out-dir ./lib",
+    "build": "rm -rf lib && babel ./src --out-dir ./lib",
+    "docs": "npm run build && webpack --config webpack.production.config.js --progress --colors ",
     "dev": "webpack-dev-server -d --hot --eval --progress --colors"
@@ -45,0 +47,0 @@ },

README.md

 # react-layouts
 React UI Layout Library
 
-In Progress
-Not Ready for Dev Use.
+Create Flexboxes easily using Flexbox and FlexItem elements which bring inline styles into play and expose a style prop to customize.
+
+
+
+##Installation
+    npm install react-layouts
+
+## Usage
+    import Layouts from 'react-layouts/lib/index';
+    let {FlexBox, FlexItem} from Layouts;
+
+## Props
+
+###FlexBox
+   1. flexDirection
+   2. flexWrap
+   3. style
+   
+###FlexItem
+   1. style
+
+## Examples
+### Flex type = Row
+    <FlexBox  flexDirection='row' flexWrap='nowrap' style={{
+				     	height:'100px',
+				     	backgroundColor:colors.greyLight,
+				     	padding: '50px'
+				     }} >
+				<FlexItem flexVal='5' style={{ background :  colors.blue }}/>
+				<FlexItem flexVal='6' style={{ background :  colors.indigo }}/>
+				<FlexItem  style={{ background :  colors.teal }}/>
+		 </FlexBox>;
+		 
+### Flex type = Column
+    <FlexBox style={{
+				     	marginTop:'10px',
+				     	height:400
+				     }} flexDirection='column' >
+				<FlexItem style={{ background :  colors.orange}}/>
+				<FlexItem style={{ background :  colors.pink }}/>
+				<FlexItem style={{ background :  colors.yellow }}/>
+		</FlexBox>;
+		
+### Flex type = nested
+    <FlexBox style={{
+				     	marginTop:'10px',
+				     	height:400
+				     }} flexDirection='row'>
+			 	<FlexItem >
+
+			      <FlexBox style={{
+							     	height:400
+							     }}  flexDirection ='column' >
+							<FlexItem style={{ background :  colors.indigo}}/>
+							<FlexItem style={{ background :  colors.greyLight }}/>
+							<FlexItem style={{ background :  colors.lightBlue }}/>
+						</FlexBox>
+
+				</FlexItem>
+      	<FlexItem style={{ background :  colors.orange}}/>
+		   	<FlexItem style={{ background :  colors.yellow }}/>
+	  </FlexBox>;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

2022819

increased by9612.02%

Lines of code

52708

increased by14959.43%

Number of lines in readme file

66

increased by1220%

Worsened metrics

Dev dependency count

28

increased by3.7%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes