New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react.js-nested-tree
Advanced tools
react.js-nested-tree - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
| { | ||
| "name": "react.js-nested-tree", | ||
| "version": "1.0.0", | ||
| "description": "This is tree list react component", | ||
| "version": "1.0.1", | ||
| "main": "dist/cjs/index.js", | ||
| "description": "This is react.js nested tree component", | ||
| "files": [ | ||
@@ -20,3 +20,3 @@ "dist" | ||
| "list", | ||
| "treeList", | ||
| "nested", | ||
| "hierarchy", | ||
@@ -23,0 +23,0 @@ "React" |
458
README.md
@@ -1,1 +0,457 @@ | ||
| React Tree List | ||
| # react.js-nested-tree | ||
|  | ||
| ## Project Structure | ||
| ``` | ||
| react.js-nested-tree/ | ||
| ├── src/ | ||
| | |__ components | ||
| | | ├── index.js | ||
| | | └── treeList | ||
| | | ├── index.js | ||
| | | ├── TreeList.tsx | ||
| | | ├── item | ||
| | | ├── tree | ||
| | | └── types | ||
| │ |__ index.ts | ||
| │ | ||
| ├── dist/ | ||
| ├── .gitignore | ||
| ├── package.json | ||
| ├── README.md | ||
| ├── rollup.config.js | ||
| ├── package-lock.json | ||
| ├── .npmignore | ||
| └── LICENSE | ||
| ``` | ||
| ## Package Configuration | ||
| ```json | ||
| { | ||
| "name": "react.js-nested-tree", | ||
| "version": "1.0.0", | ||
| "main": "dist/cjs/index.js", | ||
| "description": "This is tree list react component", | ||
| "files": ["dist"], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/react-js-package/react.js-nested-tree.git" | ||
| }, | ||
| "types": "dist/index.d.ts", | ||
| "scripts": { | ||
| "rollup": "rollup -c --bundleConfigAsCjs" | ||
| }, | ||
| "keywords": ["tree", "list", "nested", "hierarchy", "React"], | ||
| "author": "Anas Alkhamis", | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "@rollup/plugin-commonjs": "^26.0.1", | ||
| "@rollup/plugin-node-resolve": "^15.2.3", | ||
| "@rollup/plugin-terser": "^0.4.4", | ||
| "@rollup/plugin-typescript": "^11.1.6", | ||
| "@types/react": "^18.3.3", | ||
| "react": "^18.3.1", | ||
| "rollup": "^4.18.0", | ||
| "rollup-plugin-dts": "^6.1.1", | ||
| "rollup-plugin-peer-deps-external": "^2.2.4", | ||
| "tslib": "^2.6.3", | ||
| "typescript": "^5.4.5" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^18.0.0" | ||
| } | ||
| } | ||
| ``` | ||
| ## Usage | ||
| - ./App.tsx | ||
| ```tsx | ||
| import "./App.css"; | ||
| import { TreeItems } from "./TreeItems"; | ||
| import { treeData } from "./treeData"; | ||
| import { Tree } from "react.js-nested-tree"; | ||
| function App() { | ||
| return ( | ||
| <div> | ||
| <Tree | ||
| treeData={treeData} | ||
| ItemComponent={TreeItems} | ||
| parentTreeStyle={{ listStyleType: "none" }} | ||
| treeItemStyle={{ listStyleType: "none" }} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| export default App; | ||
| ``` | ||
| - ./TreeItems | ||
| ```tsx | ||
| import arrow from "./assets/arrow.svg"; | ||
| import circle from "./assets/circle.svg"; | ||
| export const TreeItems = ({ isParent, item, path, open, setOpen }: any) => { | ||
| return ( | ||
| <div className="container"> | ||
| <div | ||
| className="icon_container" | ||
| onClick={() => { | ||
| setOpen((open: any) => !open); | ||
| }} | ||
| > | ||
| {isParent ? ( | ||
| <img | ||
| src={arrow} | ||
| alt="arrow" | ||
| className="icon" | ||
| style={{ rotate: open && "180deg" }} | ||
| /> | ||
| ) : ( | ||
| <img | ||
| src={circle} | ||
| alt="circle" | ||
| className="icon" | ||
| width={22} | ||
| height={22} | ||
| /> | ||
| )} | ||
| </div> | ||
| <div className="info_container"> | ||
| <div className="info_box"> | ||
| <span className="title">{item?.name} </span> | ||
| <span className="path"> | ||
| {path?.map((p: any) => p.name).join(" / ")} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| ``` | ||
| - ./App.css | ||
| ```css | ||
| .container { | ||
| display: flex; | ||
| gap: 4px; | ||
| justify-content: start; | ||
| align-items: start; | ||
| } | ||
| .info_container, | ||
| .icon_container { | ||
| cursor: pointer; | ||
| } | ||
| .info_container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| .info_box { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 14px; | ||
| } | ||
| .description { | ||
| font-size: 10px; | ||
| color: lightgray; | ||
| align-self: flex-start; | ||
| } | ||
| .path { | ||
| font-size: 8px; | ||
| font-weight: bold; | ||
| color: black; | ||
| } | ||
| .title { | ||
| font-size: 14px; | ||
| } | ||
| .icon { | ||
| width: 12px; | ||
| } | ||
| .info_container { | ||
| display: flex; | ||
| gap: 4px; | ||
| justify-content: start; | ||
| align-items: center; | ||
| } | ||
| ``` | ||
| ./treeData | ||
| ```js | ||
| export const treeData = [ | ||
| { | ||
| id: "1", | ||
| name: "Root", | ||
| description: "This is the root node", | ||
| children: [ | ||
| { | ||
| id: "2", | ||
| name: "Level 1 - Child 1", | ||
| description: "Description for Level 1 - Child 1", | ||
| children: [ | ||
| { | ||
| id: "3", | ||
| name: "Level 2 - Child 1", | ||
| description: "Description for Level 2 - Child 1", | ||
| children: [ | ||
| { | ||
| id: "4", | ||
| name: "Level 3 - Child 1", | ||
| description: "Description for Level 3 - Child 1", | ||
| children: [ | ||
| { | ||
| id: "5", | ||
| name: "Level 4 - Child 1", | ||
| description: "Description for Level 4 - Child 1", | ||
| children: [ | ||
| { | ||
| id: "6", | ||
| name: "Level 5 - Child 1", | ||
| description: "Description for Level 5 - Child 1", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "7", | ||
| name: "Level 5 - Child 2", | ||
| description: "Description for Level 5 - Child 2", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "8", | ||
| name: "Level 5 - Child 3", | ||
| description: "Description for Level 5 - Child 3", | ||
| children: null, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "9", | ||
| name: "Level 4 - Child 2", | ||
| description: "Description for Level 4 - Child 2", | ||
| children: [ | ||
| { | ||
| id: "10", | ||
| name: "Level 5 - Child 1", | ||
| description: "Description for Level 5 - Child 1", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "11", | ||
| name: "Level 5 - Child 2", | ||
| description: "Description for Level 5 - Child 2", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "12", | ||
| name: "Level 5 - Child 3", | ||
| description: "Description for Level 5 - Child 3", | ||
| children: null, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "13", | ||
| name: "Level 4 - Child 3", | ||
| description: "Description for Level 4 - Child 3", | ||
| children: [ | ||
| { | ||
| id: "14", | ||
| name: "Level 5 - Child 1", | ||
| description: "Description for Level 5 - Child 1", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "15", | ||
| name: "Level 5 - Child 2", | ||
| description: "Description for Level 5 - Child 2", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "16", | ||
| name: "Level 5 - Child 3", | ||
| description: "Description for Level 5 - Child 3", | ||
| children: null, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "17", | ||
| name: "Level 3 - Child 2", | ||
| description: "Description for Level 3 - Child 2", | ||
| children: [ | ||
| { | ||
| id: "18", | ||
| name: "Level 4 - Child 1", | ||
| description: "Description for Level 4 - Child 1", | ||
| children: [ | ||
| { | ||
| id: "19", | ||
| name: "Level 5 - Child 1", | ||
| description: "Description for Level 5 - Child 1", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "20", | ||
| name: "Level 5 - Child 2", | ||
| description: "Description for Level 5 - Child 2", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "21", | ||
| name: "Level 5 - Child 3", | ||
| description: "Description for Level 5 - Child 3", | ||
| children: null, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "22", | ||
| name: "Level 4 - Child 2", | ||
| description: "Description for Level 4 - Child 2", | ||
| children: [ | ||
| { | ||
| id: "23", | ||
| name: "Level 5 - Child 1", | ||
| description: "Description for Level 5 - Child 1", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "24", | ||
| name: "Level 5 - Child 2", | ||
| description: "Description for Level 5 - Child 2", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "25", | ||
| name: "Level 5 - Child 3", | ||
| description: "Description for Level 5 - Child 3", | ||
| children: null, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "26", | ||
| name: "Level 4 - Child 3", | ||
| description: "Description for Level 4 - Child 3", | ||
| children: [ | ||
| { | ||
| id: "27", | ||
| name: "Level 5 - Child 1", | ||
| description: "Description for Level 5 - Child 1", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "28", | ||
| name: "Level 5 - Child 2", | ||
| description: "Description for Level 5 - Child 2", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "29", | ||
| name: "Level 5 - Child 3", | ||
| description: "Description for Level 5 - Child 3", | ||
| children: null, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "30", | ||
| name: "Level 3 - Child 3", | ||
| description: "Description for Level 3 - Child 3", | ||
| children: [ | ||
| { | ||
| id: "31", | ||
| name: "Level 4 - Child 1", | ||
| description: "Description for Level 4 - Child 1", | ||
| children: [ | ||
| { | ||
| id: "32", | ||
| name: "Level 5 - Child 1", | ||
| description: "Description for Level 5 - Child 1", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "33", | ||
| name: "Level 5 - Child 2", | ||
| description: "Description for Level 5 - Child 2", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "34", | ||
| name: "Level 5 - Child 3", | ||
| description: "Description for Level 5 - Child 3", | ||
| children: null, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "35", | ||
| name: "Level 4 - Child 2", | ||
| description: "Description for Level 4 - Child 2", | ||
| children: [ | ||
| { | ||
| id: "36", | ||
| name: "Level 5 - Child 1", | ||
| description: "Description for Level 5 - Child 1", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "37", | ||
| name: "Level 5 - Child 2", | ||
| description: "Description for Level 5 - Child 2", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "38", | ||
| name: "Level 5 - Child 3", | ||
| description: "Description for Level 5 - Child 3", | ||
| children: null, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "39", | ||
| name: "Level 4 - Child 3", | ||
| description: "Description for Level 4 - Child 3", | ||
| children: [ | ||
| { | ||
| id: "40", | ||
| name: "Level 5 - Child 1", | ||
| description: "Description for Level 5 - Child 1", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "41", | ||
| name: "Level 5 - Child 2", | ||
| description: "Description for Level 5 - Child 2", | ||
| children: null, | ||
| }, | ||
| { | ||
| id: "42", | ||
| name: "Level 5 - Child 3", | ||
| description: "Description for Level 5 - Child 3", | ||
| children: null, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
| ``` |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by157.44%
23110
- Number of lines in readme file
- increased by22800%
458
No dependency changes