npm package: @interopio/modals-api
Description: IOConnect Modals API
Author: Interop.IO
Latest version: 4.3.0

# @interopio/modals-api

## Overview

The [`@interopio/modals-api`](https://www.npmjs.com/package/@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`](https://www.npmjs.com/package/@interopio/modals-ui) library, which provides default UI templates for the modal windows.

## Installation

To install the library, execute the following command:

```cmd
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](https://docs.interop.io/desktop/capabilities/windows/modals/overview/index.html).*

> ℹ️ *For more details on using the `@interopio/modals-api` library in **io.Connect Browser** projects, see the **io.Connect Browser** [official documentation](https://docs.interop.io/browser/capabilities/windows/modals/setup/index.html).*

### io.Connect Desktop

Initializing the `@interopio/modals-api` library in a client app of an **io.Connect Desktop** project:

```javascript
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:

```javascript
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:

```javascript
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`.
```