How to use flexlayout-react - 4 common examples

To help you get started, we’ve selected a few flexlayout-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github paidem / guacozy / frontend / src / Layout / LayoutContext.js View on Github external
}));
    };

    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) {
github paidem / guacozy / frontend / src / Layout / LayoutContext.js View on Github external
const updateTabScreenSize = (tabid, screenSize) => {
        let config = state.model.getNodeById(tabid).getConfig();
        state.model.doAction(FlexLayout.Actions.updateNodeAttributes(tabid, {
            config: {
                ...config,
                screenSize: screenSize
            }
        }));
    };
github paidem / guacozy / frontend / src / Layout / LayoutContext.js View on Github external
nodeDeleteCallback: (tabNodeId) => {
                    state.model.doAction(FlexLayout.Actions.deleteTab(tabNodeId));
                }
            }
github kirjavascript / Flex2 / modules / components / layout / model.js View on Github external
'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()));
}

flexlayout-react

A multi-tab docking layout manager

MIT
Latest version published 2 months ago

Package Health Score

73 / 100
Full package analysis

Popular flexlayout-react functions