Security News
Opengrep Emerges as Open Source Alternative Amid Semgrep Licensing Controversy
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.
By Sarah Gooding - Jan 28, 2025
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
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
{
"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
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
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
.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
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,
},
],
},
],
},
],
},
],
},
],
},
];
FAQs
The react.js-nested-tree package is a versatile React component designed for creating nested, hierarchical tree structures. This package is especially useful for applications that require a visual representation of nested data, such as file explorers, cat
The npm package react.js-nested-tree receives a total of 2 weekly downloads. As such, react.js-nested-tree popularity was classified as not popular.
We found that react.js-nested-tree demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 14 Jun 2024
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
By Sarah Gooding - Jan 24, 2025
Security News
cURL Project and Go Security Teams Reject CVSS as Broken
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
By Sarah Gooding - Jan 24, 2025