📦 user-tree-visualizer

A React component to visualize user trees with pan and zoom support.

Author: Ankit Jatav
License: MIT

✨ Features

• Visualize hierarchical user trees 📈
• Supports pan and zoom using panzoom
• Clean node layout using jsPlumb
• Fully customizable styles
• Lightweight and easy to integrate 🚀

📥 Installation

npm install user-tree-visualizer

Note:
It needs React >=17 and <21 as a peer dependency.
(Compatible with React 17, 18, 19, and 20)

If you face dependency issues, install with:

npm install user-tree-visualizer --legacy-peer-deps

🛠 Usage

// src/userData.js
const generateUsers = (count) => {
    const users = [];
    for (let i = 0; i < count; i++) {
      users.push({
        _id: `user-${i}`,
        name: `User ${i}`,
        mobile: Math.floor(Math.random() * 9000000000) + 1000000000,
        role: i === 0 ? "admin" : "user",
        left: (2 * i + 1 < count) ? `user-${2 * i + 1}` : null,
        right: (2 * i + 2 < count) ? `user-${2 * i + 2}` : null,
        parentId: i === 0 ? null : `user-${Math.floor((i - 1) / 2)}`,
        nodeType: i === 0 ? null : (i % 2 === 1 ? "left" : "right"),
      });
    }
    return users;
  };
  
  export const userData = {
    message: "Users fetched successfully",
    users: generateUsers(68),
  };

  console.log(userData.users[1]);

import UserTree from "user-tree-visualizer";

const userData = {
  users: [
    { _id: "1", name: "Root User", role: "Admin", left: "2", right: "3" },
    { _id: "2", name: "Left Child", role: "Manager" },
    { _id: "3", name: "Right Child", role: "Manager" },
  ],
};

function App() {
  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <UserTree userData={userData} />
    </div>
  );
}

export default App;

📊 User Data Structure

userData should have a users array. Each user object must have:

| Field | Type | Description | |--------|--------|--------------------------------------| | _id | String | Unique ID of the user (required) | | name | String | Name of the user (required) | | role | String | Role/title of the user (optional) | | left | String | ID of the left child (optional) | | right | String | ID of the right child (optional) |

Example:

{
  "users": [
    {
      "_id": "1",
      "name": "Root User",
      "role": "Admin",
      "left": "2",
      "right": "3"
    },
    {
      "_id": "2",
      "name": "Left Child",
      "role": "Manager"
    },
    {
      "_id": "3",
      "name": "Right Child",
      "role": "Manager"
    }
  ]
}

🎨 Styling

Each user node is styled by default, but you can override it using custom CSS.

Default node styling:

.user-node {
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 8px;
  background: #fff;
  position: absolute;
  width: 120px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

🧩 Technologies Used

• React
• jsPlumb Community
• panzoom

❤️ Support

• ⭐ Star the repository if you like it!
• ✉️ Raise an issue for feature requests.

Happy Coding! 🚀