@interopio/home-ui-react 2.2.8 → 4.3.0

package/README.md

@@ -1,57 +1,81 @@
-# @interopio/home-ui-react
-
-The `@interopio/home-ui-react` library offers React components and hooks for building a [Home App](https://docs.interop.io/browser/capabilities/home-app/overview/index.html) for **io.Connect Browser** projects.
-
-![Using Home](https://docs.interop.io/browser/images/home/using-home.gif)
-
-## Installation
-
-To install the `@interopio/home-ui-react` library in your project, execute the following command:
-
-```cmd
-npm install @interopio/home-ui-react
-```
-
-## Usage
-
-The following example demonstrates initializing the `@interopio/home-ui-react` library with basic configuration:
-
-```javascript
-import { IOConnectHome } from "@interopio/home-ui-react";
-import "@interopio/workspaces-ui-react/dist/styles/workspaces.css";
-import "@interopio/home-ui-react/src/index.css";
-
-const getConfig = () => {
-    // Platform configuration.
-    const platformConfig = {
-        browserPlatform: {
-            factory: IOBrowserPlatform,
-            config: {
-                // Required license key.
-                licenseKey: "my-license-key",
-                // Workspaces App configuration.
-                workspaces: {
-                    src: "/",
-                    isFrame: true
-                }
-            }
-        }
-    };
-
-    return platformConfig;
-};
-
-// Configuration for the `<IOConnectHome />` component.
-const config = {
-    // Retrieve the platform configuration.
-    getIOConnectConfig: getConfig
-};
-
-export function App() {
-    return <IOConnectHome config={config} />
-};
-
-export default App;
-```
-
-For more details on using the library, see the [official documentation](https://docs.interop.io/browser/capabilities/home-app/library-features/index.html) of **io.Connect Browser**.
+# @interopio/home-ui-react
+
+## Overview
+
+The [`@interopio/home-ui-react`](https://www.npmjs.com/package/@interopio/home-ui-react) library offers React components and hooks for building a [Home App](https://docs.interop.io/browser/capabilities/home-app/overview/index.html) for your **io.Connect Browser** project.
+
+## Installation
+
+To install the library, execute the following command:
+
+```cmd
+npm install @interopio/home-ui-react
+```
+
+## Usage
+
+The following example demonstrates initializing the `@interopio/home-ui-react` library with basic configuration.
+
+> ℹ️ *For more details on using the `@interopio/home-ui-react` library, see the **io.Connect Browser** [official documentation](https://docs.interop.io/browser/capabilities/home-app/overview/index.html).*
+
+```javascript
+import { IOConnectHome } from "@interopio/home-ui-react";
+import IOBrowserPlatform from "@interopio/browser-platform";
+import IOWorkspaces from "@interopio/workspaces-api";
+import IOModals from "@interopio/modals-api";
+import "@interopio/workspaces-ui-react/dist/styles/workspaces.css";
+import "@interopio/home-ui-react/index.css";
+
+const getConfig = () => {
+    // Platform configuration.
+    const platformConfig = {
+        browserPlatform: {
+            factory: IOBrowserPlatform,
+            config: {
+                // Required license key.
+                licenseKey: "my-license-key",
+                // Workspaces App configuration.
+                workspaces: {
+                    src: "/",
+                    isFrame: true
+                },
+                // Modal windows are required for the Launchpad.
+                modals: {
+                    sources: {
+                        bundle: "https://my-modals/modals-bundle.js",
+                        styles: ["https://my-modals/styles.css", "https://example.com/custom-styles.css"],
+                        fonts: ["https://my-modals/fonts.css"]
+                    }
+                },
+                browser: {
+                    // Enabling the Workspaces and Modals APIs.
+                    libraries: [IOWorkspaces, IOModals],
+                    // Enabling the Main app to use modal windows.
+                    modals: {
+                        alerts: {
+                            enabled: true
+                        },
+                        dialogs: {
+                            enabled: true
+                        }
+                    }
+                }
+            }
+        }
+    };
+
+    return platformConfig;
+};
+
+// Configuration for the `<IOConnectHome />` component.
+const config = {
+    // Retrieve the platform configuration.
+    getIOConnectConfig: getConfig
+};
+
+export function App() {
+    return <IOConnectHome config={config} />
+};
+
+export default App;
+```