open-index/open-npm huggingface dataset:
npm package: @kcesys/react-genealogy
Description: A powerful, customizable, and framework-agnostic genealogy graph library for React.
Latest version: 0.1.5

# 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

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

## Quick Start (Presets)

### Tailwind CSS
```tsx
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
```tsx
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.

```tsx
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.

```typescript
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)
}
```