React

Create a new project:

             
npx create-react-app familytree

Go to the project root folder:

             
cd familytree

Install the FamilyTree JS 2:

Download the package.
Add the extracted familytree.js in your project \src\ folder.
If you use TypeScript you need to add this in the end of both files (.js and .d.ts ):
```
                     
export default FamilyTree
 
```
and copy the .d.ts file in the same folder too

Create file mytree.js in the src folder with the following content:

             
import React, { Component } from 'react';
import FamilyTree from "./familytree2.js";

export default class Tree extends Component {

    constructor(props) {
        super(props);
        this.divRef = React.createRef();
    }

    shouldComponentUpdate() {
        return false;
    }

    componentDidMount() {
        this.familyTree = new FamilyTree (this.divRef.current);
        this.familyTree.readOnly = false;
        this.familyTree.addFamilyMembers(this.props.nodes).draw(1);
    }

    render() {
        return (
            <div id="tree" ref={this.divRef}></div>
        );
    }
}

Change app.js as follows:

             
    import React, { Component } from 'react';
    import FamilyTree from './mytree';

    export default class App extends Component {
        render() {
            return (
                <div style={{height: '100%'}}>

                    <FamilyTree nodes={[
                        {id: 1, spouseIds: [2], motherId: 3, fatherId: 4},
                        {id: 2},
                        {id: 3},
                        {id: 4},
                    ]} />
                </div>
            );
        }
    }

Add this CSS to index.css

             
html, body, #root, #tree {
    height: 100%;
}

Start the project:

             
    npm start

Using NPM React project:

In this article