@interopio/home-ui-react

Overview

The @interopio/home-ui-react library offers React components and hooks for building a Home App for your io.Connect Browser project.

Installation

To install the library, execute the following command:

npm install @interopio/home-ui-react

Usage

The following example demonstrates initializing the @interopio/home-ui-react library with basic configuration.

ℹ️ For more details on using the @interopio/home-ui-react library, see the io.Connect Browser official documentation.

import { IOConnectHome } from "@interopio/home-ui-react";
import IOBrowserPlatform from "@interopio/browser-platform";
import IOWorkspaces from "@interopio/workspaces-api";
import IOModals from "@interopio/modals-api";
import "@interopio/workspaces-ui-react/dist/styles/workspaces.css";
import "@interopio/home-ui-react/index.css";

const getConfig = () => {
    // Platform configuration.
    const platformConfig = {
        browserPlatform: {
            factory: IOBrowserPlatform,
            config: {
                // Required license key.
                licenseKey: "my-license-key",
                // Workspaces App configuration.
                workspaces: {
                    src: "/",
                    isFrame: true
                },
                // Modal windows are required for the Launchpad.
                modals: {
                    sources: {
                        bundle: "https://my-modals/modals-bundle.js",
                        styles: ["https://my-modals/styles.css", "https://example.com/custom-styles.css"],
                        fonts: ["https://my-modals/fonts.css"]
                    }
                },
                browser: {
                    // Enabling the Workspaces and Modals APIs.
                    libraries: [IOWorkspaces, IOModals],
                    // Enabling the Main app to use modal windows.
                    modals: {
                        alerts: {
                            enabled: true
                        },
                        dialogs: {
                            enabled: true
                        }
                    }
                }
            }
        }
    };

    return platformConfig;
};

// Configuration for the `<IOConnectHome />` component.
const config = {
    // Retrieve the platform configuration.
    getIOConnectConfig: getConfig
};

export function App() {
    return <IOConnectHome config={config} />
};

export default App;