Show / Hide Table of Contents

React

This document shows you haw you can create an Family Tree JS React project.

  1. Create a new project:
            npx create-react-app familytree
            
  2. Go to the project root folder:
            cd familytree
            
  3. Install the Family Tree JS NPM package:
            npm i @balkangraph/familytree.js
            
  4. Create file mytree.js in the src folder with the following content:
            import React, { Component } from 'react';
            import FamilyTree from '@balkangraph/familytree.js';
    
            export default class extends Component {
    
                constructor(props) {
                    super(props);
                    this.divRef = React.createRef();
                }
    
                shouldComponentUpdate() {
                    return false;
                }
    
                componentDidMount() {
                    this.family = new FamilyTree (this.divRef.current , {
                        nodes: this.props.nodes,
    
                        nodeBinding: {
                            field_0: "name",
                            img_0: "img"
                        }
                    });
                }
    
                render() {
                    return (
                        <div id="tree" ref={this.divRef}></div>
                    );
                }
            }
            
  5. Change app.js as follows:
            import React, { Component } from 'react';
            import FamilyTree from './mytree';
    
            export default class App extends Component {
                constructor(props) {
                    super(props);
                }
    
                render() {
                    return (
                        <div style={{height: '100%'}}>
    
                            <FamilyTree nodes={[
                                { id: 1, pids: [2], name: "Amber McKenzie", gender: "female", img: "https://cdn.balkan.app/shared/2.jpg"  },
                                { id: 2, pids: [1], name: "Ava Field", gender: "male", img: "https://cdn.balkan.app/shared/m30/5.jpg" },
                                { id: 3, mid: 1, fid: 2, name: "Peter Stevens", gender: "male", img: "https://cdn.balkan.app/shared/m10/2.jpg" },
                                { id: 4, mid: 1, fid: 2, name: "Savin Stevens", gender: "male", img: "https://cdn.balkan.app/shared/m10/1.jpg"  },
                                { id: 5, mid: 1, fid: 2, name: "Emma Stevens", gender: "female", img: "https://cdn.balkan.app/shared/w10/3.jpg" }
                            ]} />
                        </div>
                    );
                }
            }
            
  6. Start the project:
            npm start