react-js-data-tree-01 - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

package.json

 {
   "name": "react-js-data-tree-01",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "show json data or array data in box tree form",
@@ -30,3 +30,8 @@ "main": "dist/index.js",
     "data tree react js",
-    "css stylish tree"
+    "css stylish tree",
+    "complex-data-tree",
+    "destructuring array and object all data",
+    "destructuring array",
+    "destructuring object",
+    "destructuring tree"
   ],
@@ -33,0 +38,0 @@ "author": "\"dinesh jangir <[e-mail]>",

ReadMe.md

 # React Js Data Tree
+React Js Data Tree is a package that allows you to easily create a tree structure in your web application. With React Js Data Tree, you can pass your data object or array, and it will be displayed as a tree structure. This package is easy to use and customizable, allowing you to add additional HTML data and customize the styles of each box in the tree.
 
-use this to create your own tree in your browser.
+Installation
+To use React Js Data Tree, you will need to install the package using npm. To install, open your terminal and type the following command:
 
-### npm install react-js-data-tree-01
+### <a href="https://www.npmjs.com/package/react-js-data-tree-01" target="_blank"> npm install react-js-data-tree-01 </a>
 ![Screenshot from 2022-08-12 11-18-50](https://user-images.githubusercontent.com/87252360/184292625-7ed6e676-ad98-4894-b260-fa77de3dea3d.png)
 
+### with extra html
+
+<img width="1409" alt="Screenshot 2023-04-15 at 8 54 49 PM" src="https://user-images.githubusercontent.com/87252360/232234020-61179e19-14f6-4d1c-af2d-95f5d144c2a3.png">
+
+
+Getting Started
+To get started with React Js Data Tree, you will need to pass your data object or array to the Tree component. Here is an example of how to use the Tree component:
+
 # Requirements
 
 ```
+import React from 'react';
+import { Tree } from 'react-js-data-tree-01';
+
+```
+
+```
 let data = {
@@ -35,2 +51,15 @@ "id": "0001",
 
+
+
+In this example, we import the Tree component from the react-js-data-tree-01 package and pass our data object to it using the data prop. This will render our data object as a tree structure in the browser.
+
+## Props
+The Tree component accepts several props that allow you to customize the tree structure and add additional functionality.
+
+## data (required)
+The data prop is the only required prop for the Tree component. This is the data object or array that you want to display as a tree structure. Here is an example of how to use the data prop:
+
+
+
+
 ```
@@ -40,6 +69,22 @@ <Tree data={data} />
 ```
-## extra props
+## heading
+The heading prop allows you to add a heading to the top of the tree structure. This prop is not required. Here is an example of how to use the heading prop:
 
 ```<Tree data={data} heading="Tree Heading" /> ```
  
+ 
+ 
+ 
+ treeStyle
+The treeStyle prop allows you to style the outer div of the tree structure. This prop is not required. Here is an example of how to use the treeStyle prop:
+
+```
+<Tree data={data} treeStyle={{ background: 'red' }} />
+```
+
+## boxStyle
+The boxStyle prop allows you to style each box in the tree structure. This prop is not required. Here is an example of how to use the boxStyle prop:
+ 
+ 
+ 
 ------------------------
@@ -68,1 +113,17 @@
 --------------------------------------
+
+
+
+You can customize the tree by passing in additional props, such as a heading, styles, or event handlers. Here's an example:
+
+
+```
+<Tree
+  data={data}
+  heading="Tree Heading"
+  treeStyle={{ background: 'red' }}
+  boxStyle={{ background: 'blue' }}
+  onClick={(data) => console.log(data)}
+  extraHtml={(data) => <div>Extra HTML for {data.type}</div>}
+/>
+```

Fixed alerts

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

Improved metrics

Total package byte prevSize

24974

increased by54.33%

Number of package files

6

increased by20%

Number of lines in readme file

127

increased by92.42%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes