open-index/open-npm huggingface dataset:
npm package: @interopio/modals-ui
Description: The [`@interopio/modals-ui`](https://www.npmjs.com/package/@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 window
Latest version: 4.3.0

# @interopio/modals-ui

## Overview

The [`@interopio/modals-ui`](https://www.npmjs.com/package/@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`](https://www.npmjs.com/package/@interopio/modals-api), which handles the functional logic for using the modal windows.

## Installation

To install the library, execute the following command:

```cmd
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](https://docs.interop.io/browser/capabilities/windows/modals/setup/index.html).*

### Main Application
```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`.
```
### Client Application
```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`.
```