pedigree-tree

Pedigree Tree React Component

The PedigreeTree React component is a flexible and customizable solution for rendering hierarchical data structures such as family trees, organizational charts, or any other tree-like structures. This component provides dynamic layout rendering and supports deep hierarchies with rich customization options.

Features

• Dynamic Tree Rendering: Automatically builds and visualizes tree structures from hierarchical data.
• Customizable Nodes: Style nodes with nodeStyle, nodeTitleStyle, and custom content rendering using renderNodeContent.
• Icon Integration: Add icons to nodes dynamically based on node type with iconComponents.
• Adjustable Layout: Control gaps between siblings and parent-child relationships with siblingGap and familyGap.
• Interactive Design: Render fully customizable node content or default node designs.
• TypeScript Support: Fully typed for better development experience and error prevention.

---

Installation

Install the package via npm or yarn:

npm install pedigree-tree

or

yarn add pedigree-tree

---

Usage

Here is an example of how to use the PedigreeTree component:

Example

import React from "react";
import PedigreeTree from "pedigree-tree";

const App: React.FC = () => {
  const familyData = [
    { id: "1", name: "Root Node", isRoot: true, iconType: "root" },
    { id: "2", name: "Child 1", parentId: "1", iconType: "child" },
    { id: "3", name: "Child 2", parentId: "1", iconType: "child" },
    { id: "4", name: "Grandchild 1", parentId: "2", iconType: "grandchild" },
    { id: "5", name: "Grandchild 2", parentId: "2", iconType: "grandchild" },
    { id: "6", name: "Grandchild 3", parentId: "3", iconType: "grandchild" },
  ];

  return (
    <PedigreeTree
      record={familyData}
      siblingGap={30}
      familyGap={50}
      nodeStyle={{
        width: "120px",
        height: "60px",
        border: "1px solid #ccc",
        borderRadius: "10px",
        backgroundColor: "#f9f9f9",
      }}
      iconComponents={{
        root: () => (
          <span role="img" aria-label="tree">
            🌳
          </span>
        ),
        child: () => (
          <span role="img" aria-label="child">
            👶
          </span>
        ),
        grandchild: () => (
          <span role="img" aria-label="grandchild">
            👦
          </span>
        ),
      }}
    />
  );
};

export default App;

---

Props

Required Props

Prop	Type	Description
record	TreeNode[]	An array of hierarchical data representing the tree structure.

Optional Props

Prop	Type	Default	Description
title	string	"My Pedigree Tree"	Title displayed above the tree.
titleStyle	CSSProperties	fontSize: 16px, ...	Styles applied to the tree title.
nodeStyle	CSSProperties	width: 90px, ...	Styles applied to individual tree nodes.
nodeTitleStyle	CSSProperties	fontSize: 8px, ...	Styles applied to the text inside nodes.
pathColor	string	"#d2d2d2"	Color of the lines connecting nodes.
siblingGap	number	20	Horizontal spacing between sibling nodes.
familyGap	number	30	Vertical spacing between parent and child nodes.
strokeWidth	number	1	Thickness of the lines connecting nodes.
nodeTitleColor	string	"black"	Color of the node title text.
iconComponents	Record<string, () => ReactNode>	{}	A map of functions returning icons based on node type.
renderNodeContent	(node: TreeNode) => ReactNode	null	Function to render custom content inside nodes.

---

TreeNode Structure

Each item in the record array should have the following structure:

Property	Type	Required	Description
id	string	Yes	A unique identifier for the node.
name	string	Yes	The name of the node to display.
parentId	string	No	The ID of the parent node.
isRoot	boolean	No	Indicates if the node is the root node.
iconType	string	No	A key to identify the icon from the iconComponents map.

---

Customization Examples

Adding Custom Node Content

You can use the renderNodeContent prop to customize the content displayed inside nodes:

<PedigreeTree
  record={familyData}
  renderNodeContent={(node) => (
    <div>
      <h4>{node.name}</h4>
      <p>ID: {node.id}</p>
    </div>
  )}
/>

Adding Custom Icons

Define custom icons for specific node types using iconComponents:

iconComponents={{
  root: () => <span role="img" aria-label="tree">🌳</span>,
  child: () => <span role="img" aria-label="child">👶</span>,
  grandchild: () => <span role="img" aria-label="grandchild">👦</span>,
}}

---

License

This package is licensed under the MIT License.

---

Contributing

Contributions are welcome! If you encounter issues or have feature suggestions, feel free to create an issue or submit a pull request on the GitHub repository.

---

Start building elegant and customizable pedigree trees with ease! 🎉