React Genealogy

A powerful, customizable, and framework-agnostic genealogy graph library for React.

Features

• 🎨 Fully Customizable: Use your own components for Nodes and Edges.
• ⚡ Framework Presets: Zero-config wrappers for Tailwind CSS and Bootstrap.
• 🩰 Smart Layout: Robust algorithm for positioning parents, spouses, siblings, and children.
• 🖱️ Interactive: Pan, Zoom, and Click events built-in.

Installation

npm install @kcesys/react-genealogy
# or
yarn add @kcesys/react-genealogy

Quick Start (Presets)

Tailwind CSS

import { TailwindGenealogy } from 'react-genealogy';

<div className="h-screen w-full">
    <TailwindGenealogy 
        data={nodes} 
        theme="dark" // or "light"
        onNodeClick={(node) => console.log('Clicked', node)}
    />
</div>

Bootstrap

import { BootstrapGenealogy } from 'react-genealogy';

<div className="h-100 w-100">
    <BootstrapGenealogy 
        data={nodes} 
        variant="primary"
    />
</div>

Core Usage (Custom)

For full control, use the GenealogyGraph component.

import { GenealogyGraph } from 'react-genealogy';

<GenealogyGraph
    data={nodes}
    renderNode={(node) => (
        <div style={{ border: '1px solid black', padding: 10 }}>
            {node.data.label}
        </div>
    )}
/>

Data Structure

The library expects a FamilyNode[] array.

interface FamilyNode {
    id: string; // Unique ID
    data: { label: string, [key: string]: any }; // Custom data
    parents: string[]; // IDs of parents
    spouses: string[]; // IDs of spouses
    children: string[]; // IDs of children
    siblings: string[]; // IDs of siblings (optional, for layout hints)
}