An example of using state with hooks to show a little more clearly how external state works in @mrblenny/react-flow-chart

flowchart-external-state-example.jsx

import {FlowChart} from "@mrblenny/react-flow-chart";
import React, {useState, useEffect} from "react";
import * as actions from "@mrblenny/react-flow-chart/src/container/actions";
export default function ChatEditor(){
    let [chart, updateChart] = useState({
        offset:{
            x: 0,
            y: 0
        },
        nodes : {
            node1: {
                id: "node1",
                type: "output-only",
                position: {
                    x: 0,
                    y: 0
                },
                ports: {
                    port1:{
                        id: "port1",
                        type: "output",
                        properties:{
                            value: "yes"
                        }
                    },
                    port2:{
                        id: "port2",
                        type: "output",
                        properties:{
                            value: "no"
                        }
                    }
                }
            },
            node2 :{
                id: "node2",
                position: {
                    x: 300,
                    y: 100
                },
                type: "input-output",
                ports: {
                    port3 :{
                        id : "port3",
                        type: "output"
                    },
                    port4 :{
                        id : "port4",
                        type: "input"
                    }
                }
            }
        },
        links: {

        },
        selected: {},
        hovered: {}
    });

    let stateActionCallbacks = Object.keys(actions).reduce((obj,key,idx)=>{
        obj[key] = (...args)=>{
            let action = actions[key];
            let newChartTransformer = action(...args);
            let newChart = newChartTransformer(chart);
            updateChart({...chart, ...newChart});
            return newChart;
        };
        return obj;
    },{});
    return(
        <FlowChart
            chart={chart}
            callbacks={stateActionCallbacks}
        />
    )
}