Search

The Search API offers two distinct functionalities: you can use it to create both search providers and search clients. Search providers are apps that respond to search queries, whereas search clients are apps that initiate searches. For instance, a search provider may return a list of instruments as a response to a search query, and may also support one or more actions - like showing a chart for the selected instrument. Actions may be executed when the user clicks on a result in the UI of a search client app. You may present multiple actions as options to the user via the search client UI, so that they may choose how to handle the search result depending on their current needs. The Search API also enables you to define search types, set debounce time for search queries, set limits for search results and more.

To be able to use the Search API in your interop-enabled apps, install the @interopio/search-api library in your project and reference it in your app. Depending on whether you want to use the Search API in your Main app, or in a Browser Client app, see the respective initialization examples in the following sections.

Install the necessary packages:

npm install @interopio/browser-platform @interopio/search-api

Initialize the @interopio/browser-platform library and enable the Search API by passing the IOSearch() factory function to the libraries array of the configuration object:

import IOBrowserPlatform from "@interopio/browser-platform";
import IOSearch from "@interopio/search-api";

const config = {
    licenseKey: "my-license-key",
    browser: {
        libraries: [IOSearch]
    }
};

const { io } = await IOBrowserPlatform(config);

// Now you can access the Search API via `io.search`.

To enable the Search API in your Browser Client apps, install the @interopio/browser and @interopio/search-api libraries and initialize the @interopio/browser library by passing the IOSearch() factory function in the configuration object. When IOBrowser() resolves, the Search API will be accessible via the search property of the returned object - e.g., io.search. The following examples demonstrate how to enable the Search API in JavaScript, React, and Angular apps.

JavaScript

Install the necessary packages:

npm install @interopio/browser @interopio/search-api

Initialize the @interopio/browser library and pass the IOSearch() factory function to the libraries array of the configuration object for initializing the library:

import IOBrowser from "@interopio/browser";
import IOSearch from "@interopio/search-api";

const config = {
    libraries: [IOSearch]
};

const io = await IOBrowser(config);

// Now you can access the Search API via `io.search`.

By default, the IOBrowser() and IOSearch() factory functions are injected in the global window object.

React

Install the necessary packages:

npm install @interopio/react-hooks @interopio/search-api

Initialize the @interopio/react-hooks library in one of the following ways and pass the IOSearch() factory function to the libraries array of the configuration object for initializing the library.

• using the <IOConnectProvider /> component:

import { createRoot } from "react-dom/client";
import { IOConnectProvider } from "@interopio/react-hooks";
import IOBrowser from "@interopio/browser";
import IOSearch from "@interopio/search-api";

const settings = {
    browser: {
        factory: IOBrowser,
        config: {
            libraries: [IOSearch]
        }
    }
};

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

root.render(
    <IOConnectProvider fallback={<h2>Loading...</h2>} settings={settings}>
        <App />
    </IOConnectProvider>
);

• using the useIOConnectInit() hook:

import { useIOConnectInit } from "@interopio/react-hooks";
import IOBrowser from "@interopio/browser";
import IOSearch from "@interopio/search-api";

const App = () => {
    const settings = {
        browser: {
            factory: IOBrowser,
            config: {
                libraries: [IOSearch]
            }
        }
    };

    const io = useIOConnectInit(settings);

    return io ? <Main io={io} /> : <Loader />;
};

export default App;

Angular

Install the necessary packages:

npm install @interopio/ng @interopio/search-api

Initialize the @interopio/ng library and pass the IOSearch() factory function to the libraries array of the configuration object for initializing the library.

In app.config.ts of the Browser Client app:

import { ApplicationConfig } from "@angular/core";
import { provideIoConnect } from "@interopio/ng";
import IOBrowser, { IOConnectBrowser } from "@interopio/browser";
import IOSearch from "@interopio/search-api";

const config: IOConnectBrowser.Config = {
    libraries: [IOSearch]
};

export const appConfig: ApplicationConfig = {
    providers: [
        provideIoConnect({
            browser: {
                factory: IOBrowser,
                config
            }
        })
    ]
};

ℹ️ For more details on initializing and configuring the @interopio/ng library depending on whether you are using Angular standalone components or modules, see the Developers > Browser Client > Angular section.