# @interopio/intents-resolver-ui-react

The [`@interopio/intents-resolver-ui-react`](https://www.npmjs.com/package/@interopio/intents-resolver-ui-react) library provides a default implementation of the io.Connect Intent Resolver for **io.Connect Desktop** projects and also enables you to create your own custom Intent Resolver app via the exported `<IOConnectIntentsResolverUI />` component.

## Installation

To install the library, execute the following command:

```cmd
npm install @interopio/intents-resolver-ui-react
```

## Usage

The following example demonstrates basic usage of the `@interopio/intents-resolver-ui-react` library.

> ℹ️ *For more details on using the `@interopio/intents-resolver-ui-react` library, see the **io.Connect Desktop** [official documentation](https://docs.interop.io/desktop/capabilities/data-sharing/intents/overview/index.html#extending_the_intent_resolver-intent_resolver_component).*

```javascript
import { createRoot } from "react-dom/client";
import IODesktop from "@interopio/desktop";
import IOConnectIntentsResolver from "@interopio/intents-resolver-api";
import IOConnectIntentsResolverUI from "@interopio/intents-resolver-ui-react";
// The default styles for the Intent Resolver App must be imported.
import "@interopio/intents-resolver-ui-react/styles";

// Provide the factory function for the `@interopio/intents-resolver-api` library.
const config = {
    libraries: [IOConnectIntentsResolver],
    // This is necessary for listening for app and app instance events.
    appManager: "full"
};

// Initialize the io.Connect API.
const io = await IODesktop(config);

const domElement = document.getElementById("root");
const root = createRoot(domElement);

root.render(
    // Provide the initialized io.Connect API object to the component.
    <IOConnectIntentsResolverUI config={{ io }}/>
);
```
