js-family-tree
v1.1.1
Published
A JavaScript library for visualizing and managing family trees using modern web technologies.
Downloads
30
Maintainers
Readme
JS Family Tree
Javascript library to create family hierarchy (compactable with all framework & libary).
Overview
The Family Tree is a versatile JavaScript library for creating interactive family tree structures in a hierarchical format. It is designed to be lightweight, easy to use, and compatible with any JavaScript framework. With this library, you can visualize family relationships and genealogical data in an intuitive and visually appealing way.
Features
- Flexible Data Input: Accepts data in object format, allowing you to define family relationships and hierarchy easily.
- Framework Agnostic: Works seamlessly with any JavaScript framework, including React, Angular, Vue.js, and more.
- Customizable Styling: Provides CSS classes for styling, allowing you to customize the appearance of the family tree to suit your needs.
- Interactive Interface: Supports interactive features such as collapsible nodes and tooltips for enhanced user experience.
- Dynamic Rendering: Dynamically renders the family tree structure based on the provided data, enabling real-time updates and modifications.
Installation
You can install the Family Tree via npm:
npm install js-family-tree
Data Passing Format
To use the js-family-tree library, you need to pass the family tree data in JSON format. Below is the structure of the JSON data and an example of how to integrate it with your library.
JSON Data Structure
The JSON data should represent the family tree with nodes and relationships. Each person in the family tree is a node with specific attributes. Here's a sample structure:
{ person: { name: "Father", gender: "Male", dob: "09/10/1998", dod: "till", img:
"https://yoururlofimage" }, spouse: { name: "Mother", gender: "Female", dob:
"09/10/1999", dod: "till", img: "https://yoururlofimage" }, children: [ {
person: { name: "Son", gender: "Male", dob: "", dod: "till", img:
"https://yoururlofimage" }, children: [ { person: { name: "Daughter", gender:
"Female", dob: "", dod: "till", img: "https://yoururlofimage" }, spouse: { name:
"Son-in-Law", gender: "Male", dob: "", dod: "till", img:
"https://yoururlofimage" }, children: [ { person: { name: "Him", gender: "Male",
dob: "", dod: "till", img: "https://yoururlofimage" }, spouse: { name: "Her",
gender: "female", dob: "", dod: "till", img: "https://yoururlofimage" },
children: [], }, { person: { name: "Him", gender: "Male", dob: "", dod: "till",
img: "path" }, spouse: { name: "Her", gender: "Female", dob: "", dod: "till",
img: "path" }, children: [], }, ], }, ], };
Description of JSON Fields
id
: A unique identifier for each person in the family tree.name
: The name of the person.gender
: The gender of the person. It can be"male"
or"female"
.spouse
: An object representing the person's spouse (if any), with similar attributes (id
,name
,gender
).children
: An array of objects representing the person's children, each with similar attributes (id
,name
,gender
).
Usage
Import and use in a React/Next component: example
import { FamilyTree } from "js-family-tree"; const sampleData = {}; function
Dummy() { useEffect(() => { const familyTreeHtml = new FamilyTree(sampleData);
const familyTreeElement = document.getElementById("familyTree"); if
(familyTreeElement) familyTreeElement.innerHTML = familyTreeHtml.render(); },
[]); return (
<div>
<div id="familyTree"></div>
</div>
); }
Import and use in a Vanilla Javascript/Typescript component: example
html file
<div id="familyTreeContainer"></div>
js file
document.addEventListener('DOMContentLoaded', () => { const familyTree = new
FamilyTree({your data as object});
familyTree.render(document.getElementById('familyTreeContainer') ); });
Documentation
Documentation is currently in progress. Please check back later for updates.
Contributing
Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request.
License
This project is licensed under the MIT License - see the LICENSE file for details.