react-virtual-dom - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

index.js

@@ -191,2 +191,3 @@ "use strict";
         style.width = size;
+        style.height = '100%';
         gapStyle.width = parent.gap;
@@ -201,2 +202,3 @@
         style.height = size;
+        style.width = '100%';
         gapStyle.height = parent.gap;
@@ -203,0 +205,0 @@

package.json

 {
   "name": "react-virtual-dom",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "convert json to react html layout(virtual DOM)",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,7 +0,14 @@
-# r-layout
-### row
-##### set horizontal layout
+# r-layout ( reactjs )
+- ### create complex html/jsx layout by json
+- ### decrease code capasity
+- ### auto generate css by js(not required styling layout by css)
+- ### based on flexbox styling
+- ### simple change layout by just change a json
+- ### repeat html attributes in loops
+- ### resize layput panels by set one property 
+# row
+- ##### generate a horizontal layout in one row without typing any css code
 ``` javascript
 import React,{Component} from "react";
-import RLayout from 'r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -11,6 +18,6 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
           gap:12,
-          attrs:{className:'container'},gap:12,
+          attrs:{className:'container'},
           row:[ //see here
@@ -27,11 +34,33 @@ {html:'a',flex:1,attrs:{className:'panel'}},
 ```
-
+- ##### gap property will generate a div by width=12px between each child panels for gapping or resizing panels
+- ##### attrs property will set all possible html attributes on div by an object. 
+- ##### notice that attrs property can be a function that returns attrs object
+- ##### this code will generate below html code:
+```javascript
+render(){
+    return (
+      <div class="r-layout-parent container" data-id="a0.4737824055943596" style="flex-direction: row; flex: 1 1 0%;">
+        <div class="r-layout-item panel" data-id="a0.32910683900978577" style="flex: 1 1 0%;">
+          a
+        </div>
+        <div class="r-layout-gap" draggable="false" style="width: 12px;"></div>
+        <div class="r-layout-item panel" data-id="a0.42573192806826876" style="flex: 1 1 0%;">
+          b
+        </div>
+        <div class="r-layout-gap" draggable="false" style="width: 12px;"></div>
+        <div class="r-layout-item panel" data-id="a0.6251698251428581" style="flex: 1 1 0%;">
+          c
+        </div>
+      </div>
+    )
+  }
+```
 [![alt text](/images/1.jpg)]
 
 ### column
-##### set vertical layout
-
+- ##### generate a vertical layout in one column without typing any css code.
+- ##### just change row in before exampe to column
 ``` javascript
 import React,{Component} from "react";
-import RLayout from 'r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -41,3 +70,3 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
@@ -57,9 +86,25 @@ gap:12,
 ```
+- ##### this code will generate below html code:
+```javascript
+<div class="r-layout-parent container" data-id="a0.16193452121795082" style="flex-direction: column; flex: 1 1 0%;">
+  <div class="r-layout-item panel" data-id="a0.7349682553750092" style="flex: 1 1 0%;">
+    a
+  </div>
+  <div class="r-layout-gap" draggable="false" style="height: 12px;"></div>
+  <div class="r-layout-item panel" data-id="a0.2587051202578894" style="flex: 1 1 0%;">
+    b
+  </div>
+  <div class="r-layout-gap" draggable="false" style="height: 12px;"></div>
+  <div class="r-layout-item panel" data-id="a0.4623202720076629" style="flex: 1 1 0%;">
+    c
+  </div>
+</div>
+```
 [![alt text](/images/2.jpg)]
-
 ### childsAttrs
-##### set childsAttrs in parent as set attrs property of childs
+- ##### set childsAttrs in parent as set attrs property of childs.
+- ##### this code is same of first example by fewer code capacity.
 ``` javascript
 import React,{Component} from "react";
-import RLayout from 'r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -69,3 +114,3 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
@@ -90,6 +135,9 @@ gap:12,
 ### childsProps
-##### set childsProps in parent as set props of childs
+- ##### set childsProps in parent as set props of childs,
+- ##### this code is same of first example by fewer code capacity.
+- ##### all div childswill get flex property set by childsAttrs,
+- ##### notice that childsAttrs can be a function that returns child attrs object.
 ``` javascript
 import React,{Component} from "react";
-import RLayout from 'r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -99,3 +147,3 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
@@ -117,3 +165,2 @@ gap:12,
 ```
-
 [![alt text](/images/1.jpg)]
@@ -123,6 +170,6 @@
 ### size
-##### set specific size on childs
+- ##### set specific size on childs
 ``` javascript
 import React,{Component} from "react";
-import RLayout from './r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -132,3 +179,3 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
@@ -157,3 +204,3 @@ gap:12,
 import React,{Component} from "react";
-import RLayout from 'r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -163,3 +210,3 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
@@ -188,3 +235,3 @@ gap:12,
 import React,{Component} from "react";
-import RLayout from 'r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -194,3 +241,3 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
@@ -218,3 +265,3 @@ gap:12,
 import React,{Component} from "react";
-import RLayout from 'r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -224,3 +271,3 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
@@ -272,3 +319,3 @@ gap:12,
 import React,{Component} from "react";
-import RLayout from 'r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -278,3 +325,3 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
@@ -323,3 +370,3 @@ gap:24,
 import React,{Component} from "react";
-import RLayout from 'r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -331,3 +378,3 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
@@ -379,3 +426,3 @@ gap:12,
 import React,{Component} from "react";
-import RLayout from 'r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -385,3 +432,3 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
@@ -425,3 +472,3 @@ gap:12,
 import React,{Component} from "react";
-import RLayout from 'r-layout';
+import ReactVirtualDom from 'react-virtual-dom';
 import './style.css'
@@ -475,3 +522,3 @@ export default class app extends Component {
     return (
-      <RLayout
+      <ReactVirtualDom
         layout={{
@@ -478,0 +525,0 @@ attrs:{className:'container',style:{padding:12,boxSizing:'border-box'}},

No alert changes

Improved metrics

Total package byte prevSize

30069

increased by10.4%

Lines of code

369

increased by0.54%

Number of lines in readme file

529

increased by9.75%

No dependency changes