@interopio/modals-api

Overview

The @interopio/modals-api library provides a convenient API for displaying and manipulating modal windows (alerts and dialogs) in io.Connect Desktop and io.Connect Browser projects. The @interopio/modals-api library is designed to work with the @interopio/modals-ui library, which provides default UI templates for the modal windows.

Installation

To install the library, execute the following command:

npm install @interopio/modals-api

Usage

The following examples demonstrate basic initialization of the @interopio/modals-api library in io.Connect Desktop and io.Connect Browser projects.

ℹ️ For more details on using the @interopio/modals-api library in io.Connect Desktop projects, see the io.Connect Desktop official documentation.

ℹ️ For more details on using the @interopio/modals-api library in io.Connect Browser projects, see the io.Connect Browser official documentation.

io.Connect Desktop

Initializing the @interopio/modals-api library in a client app of an io.Connect Desktop project:

import IODesktop from "@interopio/desktop";
import IOModals from "@interopio/modals-api";

// Initializing the Modals API.
const config = {
    libraries: [IOModals]
};

const io = await IODesktop(config);

// Now you can access the Modals API via `io.modals`.

io.Connect Browser

Initializing the @interopio/modals-api library in the Main app of an io.Connect Browser project:

import IOBrowserPlatform from "@interopio/browser-platform";
import IOModals from "@interopio/modals-api";

const config = {
    licenseKey: "my-license-key",
    // Settings for the modal windows to be used in the platform.
    modals: {
        sources: {
            // It's required to specify the locations of the bundle and styles for the modal windows.
            // You can use the resources provided by the `@interopio/modals-ui` library
            // or provide your own custom library that implements the `@interopio/modals-ui` API.
            bundle: "https://my-modals/modals-bundle.js",
            styles: ["https://my-modals/styles.css", "https://example.com/custom-styles.css"],
            // It's required to specify the fonts when using the default modal windows
            // provided by the `@interopio/modals-ui` library.
            fonts: ["https://my-modals/fonts.css"]
        }
    },
    browser: {
        // Enabling the Modals API.
        libraries: [IOModals],
        // Enabling the Main app to use modal windows.
        modals: {
            alerts: {
                enabled: true
            },
            dialogs: {
                enabled: true
            }
        }
    }
};

const { io } = await IOBrowserPlatform(config);

// Now you can access the Modals API via `io.modals`.

Initializing the @interopio/modals-api library in a Browser Client app of an io.Connect Browser project:

import IOBrowser from "@interopio/desktop";
import IOModals from "@interopio/modals-api";

// Initializing the Modals API.
const config = {
    libraries: [IOModals],
    // Enabling the Browser Client to use modal windows.
    modals: {
        alerts: {
            enabled: true
        },
        dialogs: {
            enabled: true
        }
    }
};

const io = await IOBrowser(config);

// Now you can access the Modals API via `io.modals`.