How to use flexlayout-react - 4 common examples

}));
    };

    const addIframeTab = ({url, name}) => {
        state.layout.current.addTabToActiveTabSet({
            type: "tab",
            component: "TabIframe",
            name: name,
            config: {
                url: url
            }
        });
    };

    const defaultState = {
        model: FlexLayout.Model.fromJson(defaultLayout),
        layout: layoutRef,
        actions: {
            activateTicket: activateTicket,
            addIframeTab: addIframeTab,
            deleteTab: deleteTab,
            refreshTab: refreshTab,
            updateTabScreenSize: updateTabScreenSize,
        }
    };

    const [state, setState] = useState(defaultState);

    // when we have our layout, focus on main tabset
    // this will alow to use state.layout.current.addTabToActiveTabSet()
    useEffect(() => {
        if (state.model) {

const updateTabScreenSize = (tabid, screenSize) => {
        let config = state.model.getNodeById(tabid).getConfig();
        state.model.doAction(FlexLayout.Actions.updateNodeAttributes(tabid, {
            config: {
                ...config,
                screenSize: screenSize
            }
        }));
    };

nodeDeleteCallback: (tabNodeId) => {
                    state.model.doAction(FlexLayout.Actions.deleteTab(tabNodeId));
                }
            }

'id': '#6'
                    },
                ],
            },
        ],
    },
};

const savedLayout = localStorage.getItem('layout');

export const model = do {
    if (savedLayout) {
        FlexLayout.Model.fromJson(JSON.parse(savedLayout));
    }
    else {
        FlexLayout.Model.fromJson(DEFAULT_LAYOUT);
    }
};

export function saveModel() {
    localStorage.setItem('layout', JSON.stringify(model.toJson()));
}