Security News
New CVE Forecasting Tool Predicts 47,000 Disclosures in 2025
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
By Sarah GoodingĀ - Ā Jul 07, 2025
š Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.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 13 weekly downloads. As such, react.js-nested-tree popularity was classified as not popular.
We found that react.js-nested-tree demonstrated a not healthy version release cadence and project activity because the last version was released 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
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
By Sarah GoodingĀ - Ā Jul 04, 2025
Research
Security News
8 More Malicious Firefox Extensions: Exploiting Popular Game Recognition, Hijacking User Sessions, and Stealing OAuth Credentials
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
By Kush PandyaĀ - Ā Jul 04, 2025