@interopio/modals-ui

Overview

The @interopio/modals-ui library provides React components for the modal windows(alerts and dialogs) used in io.Connect Browser projects and also enable you to create your own custom modal windows. The @interopio/modals-ui library is designed to work with the @interopio/modals-api, which handles the functional logic for using the modal windows.

Installation

To install the library, execute the following command:

npm install @interopio/modals-ui

Usage

The examples below illustrate how to set up io.Connect modal windows in both Main and Client applications

ℹ️ For more details on using modal windows in io.Connect Browser projects, see the io.Connect Browser official documentation.

Main Application

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`.

Client Application

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`.