Table of contents

Widget SDKs / Quick Search / Search Quick Widget (React)

Quick Search Widget (React)

A React component widget that enables users to perform real-time product searches with instant results, enhancing product discoverability and conversion.

Use this library when you want to render a widget and you are using React and JSX in your project.

This widget library is version 0.1.11 and the API can change. Please specify exact version when installing.

Installation

Install @recombee/quick-search-widget-react@0.1.11 and recombee-js-api-client packages using your preferred NPM package manager. This example is using pnpm.

pnpm add @recombee/quick-search-widget-react@0.1.11 recombee-js-api-client

Copy

Always remember to apply the default CSS file distributed alongside the widget library, as shown in the examples.

Client Initialization

The widget loads recommendation data using Recombee API Client. Here is how to initialize the client with necessary configuration for a specific database:

TypeScript JavaScript

import { class ApiClientClient for sending requests to Recombee and getting repliesApiClient } from "recombee-js-api-client";

const const DATABASE_ID: "[database-id]"DATABASE_ID = "[database-id]";
const const PUBLIC_TOKEN: "[database-public-token]"PUBLIC_TOKEN = "[database-public-token]";
const const REGION: "[database-region]"REGION = "[database-region]";

export const const apiClient: ApiClientapiClient = new new ApiClient(databaseId: string, publicToken: string, options?: ApiClientOptions): ApiClient@paramdatabaseId - ID of your database.@parampublicToken - Corresponding public token.@paramoptions - Other custom options.ApiClient(const DATABASE_ID: "[database-id]"DATABASE_ID, const PUBLIC_TOKEN: "[database-public-token]"PUBLIC_TOKEN, {
  region?: string | undefinedregion: const REGION: "[database-region]"REGION,
});

Copy

The Database Public Token can be found in the Admin UI Database Settings Page.

The widget also needs to be provided a createRequest function, which instantiates a client request class to define which data to pull from the database. Use Scenario ID which can be found on Admin GUI Database Scenarios Page.

Quick Search widget requires the createRequest function to return a Batch Request. For a basic case of single search request, always wrap it in a batch.

TypeScript JavaScript

import { type type CreateRequestFunction = (options: {
    searchQuery: string;
    isFullScreen?: boolean;
}) => RequestCreateRequestFunction } from "@recombee/quick-search-widget-react";
import { class BatchBatch processing allows you to submit any sequence of requests within a single HTTPS request.

Any type of request from this SDK may be used in the Batch, and the Batch may combine different types of requests arbitrarily as well.

Using Batch requests can be beneficial in situations such as synchronizing the catalog of items or uploading historical interaction data,
as sending the data in Batch is considerably faster than sending the individual requests (thanks to optimizations and reducing network and HTTPS overhead).
@noteThe status code of the batch request itself is 200 even if the individual requests result in an error – you have to inspect the code values in the resulting array.Batch, class SearchItemsFull-text personalized search. The results are based on the provided `searchQuery` and also on the user's past interactions (purchases, ratings, etc.) with the items (items more suitable for the user are preferred in the results).
All the string and set item properties are indexed by the search engine.
This endpoint should be used in a search box on your website/app. It can be called multiple times as the user is typing the query in order to get the most viable suggestions based on the current state of the query, or once after submitting the whole query.
The returned items are sorted by relevance (the first item being the most relevant).
Besides the recommended items, also a unique `recommId` is returned in the response. It can be used to:
- Let Recombee know that this search was successful (e.g., user clicked one of the recommended items). See [Reported metrics](https://docs.recombee.com/admin_ui.html#reported-metrics).
- Get subsequent search results when the user scrolls down or goes to the next page. See [Recommend Next Items](https://docs.recombee.com/api.html#recommend-next-items).
It is also possible to use POST HTTP method (for example in the case of a very long ReQL filter) - query parameters then become body parameters.SearchItems, class SearchItemSegmentsFull-text personalized search that returns Segments from a Segmentation. The results are based on the provided `searchQuery` and also on the user's past interactions (purchases, ratings, etc.).
Based on the used Segmentation, this endpoint can be used for example for:
  - Searching within categories or brands
  - Searching within genres or artists
For example if the user is searching for "iPhone" this endpoint can return "cell phones" category.
You need to set the used Segmentation the Admin UI in the Scenario settings prior to using this endpoint.
The returned segments are sorted by relevance (first segment being the most relevant).
It is also possible to use POST HTTP method (for example in case of very long ReQL filter) - query parameters then become body parameters.SearchItemSegments } from "recombee-js-api-client";

const const createRequest: CreateRequestFunctioncreateRequest: type CreateRequestFunction = (options: {
    searchQuery: string;
    isFullScreen?: boolean;
}) => RequestCreateRequestFunction = ({ searchQuery: stringsearchQuery }) => {
  return new new Batch(requests: Request[], optional?: {
    distinctRecomms?: boolean;
}): Batch@paramrequests - Array containing the requests.@paramoptional - Optional parameters given as an object (allowed parameters: distinctRecomms).Batch(
    [
      new new SearchItems(userId: string, searchQuery: string, count: number, optional?: {
    scenario?: string;
    cascadeCreate?: boolean;
    returnProperties?: boolean;
    includedProperties?: string[];
    filter?: string;
    booster?: string;
    logic?: string | object;
    expertSettings?: {
        [key: string]: unknown;
    };
    returnAbGroup?: boolean;
}): SearchItems@paramuserId - ID of the user for whom personalized search will be performed.@paramsearchQuery - Search query provided by the user. It is used for the full-text search.@paramcount - Number of items to be returned (N for the top-N results).@paramoptional - Optional parameters given as an object.SearchItems(userId, searchQuery: stringsearchQuery, 5, {
        scenario?: string | undefinedScenario defines a particular search field in your user interface.scenario: "search-items",
        cascadeCreate?: boolean | undefinedIf the user does not exist in the database, returns a list of non-personalized search results and creates the user in the database. This allows, for example, rotations in the following recommendations for that user, as the user will be already known to the system.cascadeCreate: true,
        returnProperties?: boolean | undefinedWith `returnProperties=true`, property values of the recommended items are returned along with their IDs in a JSON dictionary. The acquired property values can be used to easily display the recommended items to the user.returnProperties: true,
      }),
      new new SearchItemSegments(userId: string, searchQuery: string, count: number, optional?: {
    scenario?: string;
    cascadeCreate?: boolean;
    filter?: string;
    booster?: string;
    logic?: string | object;
    expertSettings?: {
        [key: string]: unknown;
    };
    returnAbGroup?: boolean;
}): SearchItemSegments@paramuserId - ID of the user for whom personalized search will be performed.@paramsearchQuery - Search query provided by the user. It is used for the full-text search.@paramcount - Number of segments to be returned (N for the top-N results).@paramoptional - Optional parameters given as an object.SearchItemSegments(userId, searchQuery: stringsearchQuery, 5, {
        scenario?: string | undefinedScenario defines a particular application of recommendations. It can be, for example, "homepage", "cart", or "emailing".scenario: "search-categories",
        cascadeCreate?: boolean | undefinedIf the user does not exist in the database, returns a list of non-personalized recommendations and creates the user in the database. This allows, for example, rotations in the following recommendations for that user, as the user will be already known to the system.cascadeCreate: true,
      }),
    ],
    {
      distinctRecomms?: boolean | undefineddistinctRecomms: true,
    },
  );
};

Copy

Providing User ID

Each visitor of your website should be identified by a user identificator (userId) to correlate user activity and deliver best possible recommendation performance. The userId should preferrably originate from your user's account details when the user is authenticated or as some session-persistent random ID when they are anonymous. The SDK provides utility which generates random user id and saves it to a cookie to cover the latter case:

TypeScript JavaScript

import { type type CreateRequestFunction = (options: {
    searchQuery: string;
    isFullScreen?: boolean;
}) => RequestCreateRequestFunction } from "@recombee/quick-search-widget-react";
import { class BatchBatch processing allows you to submit any sequence of requests within a single HTTPS request.

Any type of request from this SDK may be used in the Batch, and the Batch may combine different types of requests arbitrarily as well.

Using Batch requests can be beneficial in situations such as synchronizing the catalog of items or uploading historical interaction data,
as sending the data in Batch is considerably faster than sending the individual requests (thanks to optimizations and reducing network and HTTPS overhead).
@noteThe status code of the batch request itself is 200 even if the individual requests result in an error – you have to inspect the code values in the resulting array.Batch, class SearchItemsFull-text personalized search. The results are based on the provided `searchQuery` and also on the user's past interactions (purchases, ratings, etc.) with the items (items more suitable for the user are preferred in the results).
All the string and set item properties are indexed by the search engine.
This endpoint should be used in a search box on your website/app. It can be called multiple times as the user is typing the query in order to get the most viable suggestions based on the current state of the query, or once after submitting the whole query.
The returned items are sorted by relevance (the first item being the most relevant).
Besides the recommended items, also a unique `recommId` is returned in the response. It can be used to:
- Let Recombee know that this search was successful (e.g., user clicked one of the recommended items). See [Reported metrics](https://docs.recombee.com/admin_ui.html#reported-metrics).
- Get subsequent search results when the user scrolls down or goes to the next page. See [Recommend Next Items](https://docs.recombee.com/api.html#recommend-next-items).
It is also possible to use POST HTTP method (for example in the case of a very long ReQL filter) - query parameters then become body parameters.SearchItems, class SearchItemSegmentsFull-text personalized search that returns Segments from a Segmentation. The results are based on the provided `searchQuery` and also on the user's past interactions (purchases, ratings, etc.).
Based on the used Segmentation, this endpoint can be used for example for:
  - Searching within categories or brands
  - Searching within genres or artists
For example if the user is searching for "iPhone" this endpoint can return "cell phones" category.
You need to set the used Segmentation the Admin UI in the Scenario settings prior to using this endpoint.
The returned segments are sorted by relevance (first segment being the most relevant).
It is also possible to use POST HTTP method (for example in case of very long ReQL filter) - query parameters then become body parameters.SearchItemSegments } from "recombee-js-api-client";
import { class PersistentUserIDPersistentUserID } from "@recombee/carousel-widget-react";

let let userId: string | undefineduserId: string | undefined;
if (authenticatedUserId) {
  let userId: string | undefineduserId = authenticatedUserId;
} else {
  let userId: string | undefineduserId = class PersistentUserIDPersistentUserID.PersistentUserID.getId(): stringgetId();
}

const const createRequest: CreateRequestFunctioncreateRequest: type CreateRequestFunction = (options: {
    searchQuery: string;
    isFullScreen?: boolean;
}) => RequestCreateRequestFunction = ({ searchQuery: stringsearchQuery }) => {
  return new new Batch(requests: Request[], optional?: {
    distinctRecomms?: boolean;
}): Batch@paramrequests - Array containing the requests.@paramoptional - Optional parameters given as an object (allowed parameters: distinctRecomms).Batch(
    [
      new new SearchItems(userId: string, searchQuery: string, count: number, optional?: {
    scenario?: string;
    cascadeCreate?: boolean;
    returnProperties?: boolean;
    includedProperties?: string[];
    filter?: string;
    booster?: string;
    logic?: string | object;
    expertSettings?: {
        [key: string]: unknown;
    };
    returnAbGroup?: boolean;
}): SearchItems@paramuserId - ID of the user for whom personalized search will be performed.@paramsearchQuery - Search query provided by the user. It is used for the full-text search.@paramcount - Number of items to be returned (N for the top-N results).@paramoptional - Optional parameters given as an object.SearchItems(let userId: string | undefineduserId, searchQuery: stringsearchQuery, 5, {
        scenario?: string | undefinedScenario defines a particular search field in your user interface.scenario: "search-items",
        cascadeCreate?: boolean | undefinedIf the user does not exist in the database, returns a list of non-personalized search results and creates the user in the database. This allows, for example, rotations in the following recommendations for that user, as the user will be already known to the system.cascadeCreate: true,
        returnProperties?: boolean | undefinedWith `returnProperties=true`, property values of the recommended items are returned along with their IDs in a JSON dictionary. The acquired property values can be used to easily display the recommended items to the user.returnProperties: true,
      }),
      new new SearchItemSegments(userId: string, searchQuery: string, count: number, optional?: {
    scenario?: string;
    cascadeCreate?: boolean;
    filter?: string;
    booster?: string;
    logic?: string | object;
    expertSettings?: {
        [key: string]: unknown;
    };
    returnAbGroup?: boolean;
}): SearchItemSegments@paramuserId - ID of the user for whom personalized search will be performed.@paramsearchQuery - Search query provided by the user. It is used for the full-text search.@paramcount - Number of segments to be returned (N for the top-N results).@paramoptional - Optional parameters given as an object.SearchItemSegments(let userId: string | undefineduserId, searchQuery: stringsearchQuery, 5, {
        scenario?: string | undefinedScenario defines a particular application of recommendations. It can be, for example, "homepage", "cart", or "emailing".scenario: "search-categories",
        cascadeCreate?: boolean | undefinedIf the user does not exist in the database, returns a list of non-personalized recommendations and creates the user in the database. This allows, for example, rotations in the following recommendations for that user, as the user will be already known to the system.cascadeCreate: true,
      }),
    ],
    {
      distinctRecomms?: boolean | undefineddistinctRecomms: true,
    },
  );
};

Copy

Basic Example

The widget in this example uses the DefaultItem component to render each recommendation in a consistent layout.

The resulting widget is inserted into the element specified by the container field.

Values of the recommended items - such as title, image URL, or link URL - are obtained from the API response and accessed via props.result?.values.

Ensure that returnProperties: true is set in the request, and optionally use includedProperties to control which item properties are returned.

TypeScript + ESM JavaScript + ESM

import {
  const QuickSearchWidget: React.FunctionComponent<QuickSearchWidgetProps>Quick Search widget component
@publicQuickSearchWidget,
  function addRecommIdQueryParam(url: string, recommId: string | undefined): stringUtility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam,
  const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput,
  const DefaultItem: ((props: {
    href?: string;
    image?: React.ReactNode;
    primaryContent?: React.ReactNode;
    secondaryContent?: React.ReactNode;
    highlightedContent?: React.ReactNode;
}) => React.JSX.Element) & {
    ...;
}DefaultItem,
  const ItemImage: React.FunctionComponent<ItemImageProps>Item image component
@publicItemImage,
  function SearchIcon(): React.JSX.ElementSearchIcon,
  function CloseIcon(): React.JSX.ElementCloseIcon,
} from "@recombee/quick-search-widget-react";
import "@recombee/quick-search-widget-react/dist/styles.css";

export default () => {
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex justify-center p-12">
      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="@container-normal">
        <const QuickSearchWidget: React.FunctionComponent<QuickSearchWidgetProps>Quick Search widget component
@publicQuickSearchWidget
          WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.apiClient: ApiClientInstance of Recombee JS API Client. See

{@link 
file://./#client-initialization Example
}
.
@publicapiClient={const apiClient: ApiClientapiClient}
          WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.createRequest: CreateRequestFunctionRequest factory function. See

{@link 
file://./#client-initialization Quick Example
}
 or visit

{@link 
file:///api API Reference
}
 for overview of available requests.
@publiccreateRequest={const createRequest: CreateRequestFunctioncreateRequest}
          minSearchCharactersCount: numberMinimum length of search query for search request to be sent.
@publicminSearchCharactersCount={3}
          desktopMediaQuery: stringCSS media query specifing when the widget should behave as displayed on
desktop. By default, widget behaves as mobile-first, filling entire
device screen with results dropdown.
@publicdesktopMediaQuery="(min-width: 1000px)"
          type InputComponent: React.FC<InputProps>Component responsible for rendering the widget input.
@publicInputComponent={(props: InputPropsprops) => (
            <React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form React.HTMLAttributes<T>.className?: string | undefinedclassName="flex w-[400px] text-[#374040]">
              <const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput
                state: QuickSearchWidgetStatestate={props: InputPropsprops.state: QuickSearchWidgetStatestate}
                inputProps?: {
    placeholder?: string;
} | undefinedinputProps={{ placeholder?: string | undefinedplaceholder: `Search for "table"...` }}
              />
            </React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form>
          )}
          type TriggerComponent: React.FC<TriggerProps>Component responsible for rendering the widget trigger on mobile devices.
@publicTriggerComponent={(props: TriggerPropsprops) => (
            <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button
              {...props: TriggerPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.triggerProps: {
    ref: (element: HTMLElement | null) => void;
    onClick: () => void;
}Properties to be passed to the trigger button of a mobile widget.
@publictriggerProps}
              React.HTMLAttributes<T>.className?: string | undefinedclassName="flex size-[38px] items-center justify-center rounded-sm bg-[#3bc4a1] text-white"
            >
              <function SearchIcon(): React.JSX.ElementSearchIcon />
            </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
          )}
          type DropdownComponent: React.FC<DropdownProps>Component responsible for rendering the widget dropdown.
@publicDropdownComponent={(props: DropdownPropsprops) => (
            <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="mt-1 flex h-full max-h-full min-h-0 flex-col rounded-sm bg-white text-[#374040] shadow-2xl lg:h-auto lg:max-w-[900px] lg:min-w-[600px]">
              {!props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.isDesktop: booleanIndicates that the widget is displayed on desktop device.
@publicisDesktop && (
                <React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form React.HTMLAttributes<T>.className?: string | undefinedclassName="flex items-center gap-2 p-2">
                  <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex-grow">
                    <const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput
                      state: QuickSearchWidgetStatestate={props: DropdownPropsprops.state: QuickSearchWidgetStatestate}
                      inputProps?: {
    placeholder?: string;
} | undefinedinputProps={{ placeholder?: string | undefinedplaceholder: `Search for "table"...` }}
                    />
                  </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                  <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button
                    {...props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.closeButtonProps: {
    type: "button";
    onClick: () => void;
    onTouchEnd: () => void;
}Properties to be passed to the close button of a mobile dropdown.
@publiccloseButtonProps}
                    React.HTMLAttributes<T>.className?: string | undefinedclassName="flex size-[38px] items-center justify-center"
                  >
                    <function CloseIcon(): React.JSX.ElementCloseIcon />
                  </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
                </React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form>
              )}
              <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex min-h-0 flex-grow flex-col">
                <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="px-4 py-4 pb-2 text-sm font-semibold text-[#3f91ff]">
                  Results
                </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="overflow-auto p-2">
                  {props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.items: (index: number) => {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]Getter for current results of the request batch. The `index` parameter
indicates an index of results in the Batch Request for which to return
items.
@publicitems(0).Array<{ key: string; id: string; recommId: string; values: { [key: string]: any; }; itemProps: { tabIndex: number; "data-search-result-id"?: string | undefined; onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void; }; }>.map<React.JSX.Element>(callbackfn: (value: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}, index: number, array: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item) => (
                    <const DefaultItem: ((props: {
    href?: string;
    image?: React.ReactNode;
    primaryContent?: React.ReactNode;
    secondaryContent?: React.ReactNode;
    highlightedContent?: React.ReactNode;
}) => React.JSX.Element) & {
    ...;
}DefaultItem
                      React.Attributes.key?: React.Key | null | undefinedkey={item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.key: stringkey}
                      href?: string | undefinedhref={function addRecommIdQueryParam(url: string, recommId: string | undefined): stringUtility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam(
                        `${item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anylink}`,
                        item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.recommId: stringrecommId,
                      )}
                      image?: React.ReactNodeimage={
                        <const ItemImage: React.FunctionComponent<ItemImageProps>Item image component
@publicItemImage
                          className?: string | undefinedImage wrapper class name
@publicclassName="size-16 overflow-hidden rounded-lg"
                          src?: string | null | undefinedImage URL
@publicsrc={`${item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anyimage}`}
                          width?: number | undefinedImage width in pixels
@publicwidth={600}
                          height?: number | undefinedImage height in pixels
@publicheight={400}
                        />
                      }
                      primaryContent?: React.ReactNodeprimaryContent={item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anyproduct_title}
                      secondaryContent?: React.ReactNodesecondaryContent={item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anycategory_top}
                      highlightedContent?: React.ReactNodehighlightedContent={`USD ${item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anyprice}`}
                      {...item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.itemProps: {
    tabIndex: number;
    "data-search-result-id"?: string | undefined;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
}itemProps}
                    />
                  ))}
                </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
              </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
            </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
          )}
        />
      </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
};

Copy

Custom Template

You can customize the appearance and behavior of the Quick Search Widget by overriding its individual components:

DropdownComponent – Renders the dropdown containing search results.
InputComponent – Handles the search input field where users type their queries.
TriggerComponent – Controls how the widget is opened on mobile devices.

The example also demonstrates how to make the search form submittable to a dedicated results page using a submit button.

TypeScript + ESM JavaScript + ESM

import {
  const QuickSearchWidget: React.FunctionComponent<QuickSearchWidgetProps>Quick Search widget component
@publicQuickSearchWidget,
  function addRecommIdQueryParam(url: string, recommId: string | undefined): stringUtility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam,
  function DefaultSpinner(props: {
    className: string;
}): React.JSX.ElementDefaultSpinner,
  const ItemImage: React.FunctionComponent<ItemImageProps>Item image component
@publicItemImage,
  function SearchIcon(): React.JSX.ElementSearchIcon,
  function CloseIcon(): React.JSX.ElementCloseIcon,
} from "@recombee/quick-search-widget-react";
import "@recombee/quick-search-widget-react/dist/styles.css";

export default () => {
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex justify-center p-12">
      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="@container-normal">
        <const QuickSearchWidget: React.FunctionComponent<QuickSearchWidgetProps>Quick Search widget component
@publicQuickSearchWidget
          WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.apiClient: ApiClientInstance of Recombee JS API Client. See

{@link 
file://./#client-initialization Example
}
.
@publicapiClient={const apiClient: ApiClientapiClient}
          WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.createRequest: CreateRequestFunctionRequest factory function. See

{@link 
file://./#client-initialization Quick Example
}
 or visit

{@link 
file:///api API Reference
}
 for overview of available requests.
@publiccreateRequest={const createRequest: CreateRequestFunctioncreateRequest}
          minSearchCharactersCount: numberMinimum length of search query for search request to be sent.
@publicminSearchCharactersCount={3}
          typingDebounceDuration?: number | undefinedMaximum duration between keystrokes in milliseconds before search request
is made.
@publictypingDebounceDuration={1000}
          desktopMediaQuery: stringCSS media query specifing when the widget should behave as displayed on
desktop. By default, widget behaves as mobile-first, filling entire
device screen with results dropdown.
@publicdesktopMediaQuery="(min-width: 1000px)"
          type InputComponent: React.FC<InputProps>Component responsible for rendering the widget input.
@publicInputComponent={(props: InputPropsprops) => (
            <React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form
              React.FormHTMLAttributes<HTMLFormElement>.method?: string | undefinedmethod="GET"
              React.FormHTMLAttributes<HTMLFormElement>.action?: string | ((formData: FormData) => void | Promise<void>) | undefinedaction="https://example.com/search"
              React.FormHTMLAttributes<HTMLFormElement>.target?: string | undefinedtarget="_blank"
              React.HTMLAttributes<T>.className?: string | undefinedclassName="flex w-[400px] gap-2 text-[#374040]"
            >
              <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="relative flex flex-grow overflow-hidden rounded-lg border border-[#d9dbdb]">
                <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex size-[38px] items-center justify-center text-[#737979]">
                  <function SearchIcon(): React.JSX.ElementSearchIcon />
                </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                <React.JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>input
                  React.InputHTMLAttributes<HTMLInputElement>.name?: string | undefinedname="q"
                  React.InputHTMLAttributes<HTMLInputElement>.type?: React.HTMLInputTypeAttribute | undefinedtype="text"
                  React.HTMLAttributes<T>.className?: string | undefinedclassName="block w-full outline-hidden"
                  React.InputHTMLAttributes<HTMLInputElement>.placeholder?: string | undefinedplaceholder={`Search for "table"...`}
                  {...props: InputPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.inputProps: {
    value: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    onClick: () => void;
    ref: (element: HTMLElement | null) => void;
}Properties to be passed to a input component.
@publicinputProps}
                />
                {props: InputPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.isLoading: booleanBoolean flag indicating that a request for new results is in flight.
@publicisLoading && (
                  <function DefaultSpinner(props: {
    className: string;
}): React.JSX.ElementDefaultSpinner className: stringclassName="rb:absolute rb:top-2.25 rb:right-2.25 rb:h-5 rb:w-5" />
                )}
              </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
              <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button
                React.ButtonHTMLAttributes<HTMLButtonElement>.type?: "button" | "reset" | "submit" | undefinedtype="submit"
                React.HTMLAttributes<T>.className?: string | undefinedclassName="rounded-lg bg-[#3f91ff] px-5 py-2.5 text-sm font-medium text-white focus:ring-4 focus:ring-blue-300 focus:outline-hidden"
              >
                Search
              </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
            </React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form>
          )}
          type TriggerComponent: React.FC<TriggerProps>Component responsible for rendering the widget trigger on mobile devices.
@publicTriggerComponent={(props: TriggerPropsprops) => (
            <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button
              {...props: TriggerPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.triggerProps: {
    ref: (element: HTMLElement | null) => void;
    onClick: () => void;
}Properties to be passed to the trigger button of a mobile widget.
@publictriggerProps}
              React.HTMLAttributes<T>.className?: string | undefinedclassName="flex size-[38px] items-center justify-center rounded-sm bg-[#3bc4a1] text-white"
            >
              <function SearchIcon(): React.JSX.ElementSearchIcon />
            </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
          )}
          type DropdownComponent: React.FC<DropdownProps>Component responsible for rendering the widget dropdown.
@publicDropdownComponent={(props: DropdownPropsprops) => (
            <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="mt-1 flex h-full max-h-full min-h-0 flex-col rounded-sm bg-white text-[#374040] shadow-2xl lg:h-auto lg:max-w-[900px] lg:min-w-[600px]">
              {!props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.isDesktop: booleanIndicates that the widget is displayed on desktop device.
@publicisDesktop && (
                <React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form React.HTMLAttributes<T>.className?: string | undefinedclassName="flex items-center gap-2 p-2">
                  <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex-grow">
                    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="relative flex flex-grow overflow-hidden rounded-lg border border-[#d9dbdb]">
                      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex size-[42px] items-center justify-center text-[#737979]">
                        <function SearchIcon(): React.JSX.ElementSearchIcon />
                      </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                      <React.JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>input
                        React.InputHTMLAttributes<HTMLInputElement>.type?: React.HTMLInputTypeAttribute | undefinedtype="text"
                        React.HTMLAttributes<T>.className?: string | undefinedclassName="block w-full outline-hidden"
                        React.InputHTMLAttributes<HTMLInputElement>.placeholder?: string | undefinedplaceholder="Search in docs..."
                        {...props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.inputProps: {
    value: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    onClick: () => void;
    ref: (element: HTMLElement | null) => void;
}Properties to be passed to a input component.
@publicinputProps}
                      />
                      {props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.isLoading: booleanBoolean flag indicating that a request for new results is in flight.
@publicisLoading && (
                        <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="absolute top-2.5 right-2.5 h-5 w-5 animate-spin rounded-full border-2 border-dashed border-current text-[#d9dbdb] [--animate-spin:spin_3s_linear_infinite]" />
                      )}
                    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                  </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                  <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button
                    {...props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.closeButtonProps: {
    type: "button";
    onClick: () => void;
    onTouchEnd: () => void;
}Properties to be passed to the close button of a mobile dropdown.
@publiccloseButtonProps}
                    React.HTMLAttributes<T>.className?: string | undefinedclassName="flex size-[38px] items-center justify-center"
                  >
                    <function CloseIcon(): React.JSX.ElementCloseIcon />
                  </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
                </React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form>
              )}
              <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex min-h-0 flex-grow flex-col">
                <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="px-4 py-4 pb-2 text-sm font-semibold text-[#3f91ff]">
                  Results
                </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="overflow-auto p-2">
                  {props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.items: (index: number) => {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]Getter for current results of the request batch. The `index` parameter
indicates an index of results in the Batch Request for which to return
items.
@publicitems(0).Array<{ key: string; id: string; recommId: string; values: { [key: string]: any; }; itemProps: { tabIndex: number; "data-search-result-id"?: string | undefined; onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void; }; }>.map<React.JSX.Element>(callbackfn: (value: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}, index: number, array: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item) => (
                    <React.JSX.IntrinsicElements.a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>a
                      React.Attributes.key?: React.Key | null | undefinedkey={item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.key: stringkey}
                      React.AnchorHTMLAttributes<HTMLAnchorElement>.href?: string | undefinedhref={function addRecommIdQueryParam(url: string, recommId: string | undefined): stringUtility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam(
                        `${item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anylink}`,
                        item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.recommId: stringrecommId,
                      )}
                      {...item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.itemProps: {
    tabIndex: number;
    "data-search-result-id"?: string | undefined;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
}itemProps}
                      React.HTMLAttributes<T>.className?: string | undefinedclassName="flex items-center gap-4 rounded-sm p-2 outline-hidden hover:bg-[#f7f7f7] focus:bg-[#f7f7f7]"
                    >
                      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                        <const ItemImage: React.FunctionComponent<ItemImageProps>Item image component
@publicItemImage
                          className?: string | undefinedImage wrapper class name
@publicclassName="size-16 overflow-hidden rounded-lg"
                          src?: string | null | undefinedImage URL
@publicsrc={`${item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anyimage}`}
                          width?: number | undefinedImage width in pixels
@publicwidth={600}
                          height?: number | undefinedImage height in pixels
@publicheight={400}
                        />
                      </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="rb:flex-grow">
                        <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="rb:font-semibold rb:text-nowrap rb:text-ellipsis rb:overflow-hidden">
                          {item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anyproduct_title}
                        </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                        <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="rb:text-[#737979] rb:text-nowrap rb:text-ellipsis rb:overflow-hidden">
                          {item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anycategory}
                        </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                      </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="rb:font-bold rb:text-[#3f91ff] rb:text-nowrap rb:text-ellipsis rb:overflow-hidden">{`USD ${item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anyprice}`}</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                    </React.JSX.IntrinsicElements.a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>a>
                  ))}
                </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
              </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
            </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
          )}
        />
      </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
};

Copy

Multi-Type Search Results

You can use the Quick Search Widget to display multiple types of results. For example, showing not only items but also categories or brands using the Search Item Segments requests.

All search requests are sent together in a single Batch request.

TypeScript + ESM JavaScript + ESM

import {
  const QuickSearchWidget: React.FunctionComponent<QuickSearchWidgetProps>Quick Search widget component
@publicQuickSearchWidget,
  function addRecommIdQueryParam(url: string, recommId: string | undefined): stringUtility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam,
  const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput,
  const DefaultItem: ((props: {
    href?: string;
    image?: React.ReactNode;
    primaryContent?: React.ReactNode;
    secondaryContent?: React.ReactNode;
    highlightedContent?: React.ReactNode;
}) => React.JSX.Element) & {
    ...;
}DefaultItem,
  const ItemImage: React.FunctionComponent<ItemImageProps>Item image component
@publicItemImage,
  function SearchIcon(): React.JSX.ElementSearchIcon,
  function CloseIcon(): React.JSX.ElementCloseIcon,
} from "@recombee/quick-search-widget-react";
import "@recombee/quick-search-widget-react/dist/styles.css";

const const createRequest: CreateRequestFunctioncreateRequest: type CreateRequestFunction = (options: {
    searchQuery: string;
    isFullScreen?: boolean;
}) => RequestCreateRequestFunction = ({ searchQuery: stringsearchQuery }) => {
  return new new Batch(requests: Request[], optional?: {
    distinctRecomms?: boolean;
}): Batch@paramrequests - Array containing the requests.@paramoptional - Optional parameters given as an object (allowed parameters: distinctRecomms).Batch(
    [
      new new SearchItems(userId: string, searchQuery: string, count: number, optional?: {
    scenario?: string;
    cascadeCreate?: boolean;
    returnProperties?: boolean;
    includedProperties?: string[];
    filter?: string;
    booster?: string;
    logic?: string | object;
    expertSettings?: {
        [key: string]: unknown;
    };
    returnAbGroup?: boolean;
}): SearchItems@paramuserId - ID of the user for whom personalized search will be performed.@paramsearchQuery - Search query provided by the user. It is used for the full-text search.@paramcount - Number of items to be returned (N for the top-N results).@paramoptional - Optional parameters given as an object.SearchItems("userId", searchQuery: stringsearchQuery, 5, {
        scenario?: string | undefinedScenario defines a particular search field in your user interface.scenario: "search",
        cascadeCreate?: boolean | undefinedIf the user does not exist in the database, returns a list of non-personalized search results and creates the user in the database. This allows, for example, rotations in the following recommendations for that user, as the user will be already known to the system.cascadeCreate: true,
        returnProperties?: boolean | undefinedWith `returnProperties=true`, property values of the recommended items are returned along with their IDs in a JSON dictionary. The acquired property values can be used to easily display the recommended items to the user.returnProperties: true,
      }),
      new new SearchItemSegments(userId: string, searchQuery: string, count: number, optional?: {
    scenario?: string;
    cascadeCreate?: boolean;
    filter?: string;
    booster?: string;
    logic?: string | object;
    expertSettings?: {
        [key: string]: unknown;
    };
    returnAbGroup?: boolean;
}): SearchItemSegments@paramuserId - ID of the user for whom personalized search will be performed.@paramsearchQuery - Search query provided by the user. It is used for the full-text search.@paramcount - Number of segments to be returned (N for the top-N results).@paramoptional - Optional parameters given as an object.SearchItemSegments("userId", searchQuery: stringsearchQuery, 5, {
        scenario?: string | undefinedScenario defines a particular application of recommendations. It can be, for example, "homepage", "cart", or "emailing".scenario: "search-brands",
        cascadeCreate?: boolean | undefinedIf the user does not exist in the database, returns a list of non-personalized recommendations and creates the user in the database. This allows, for example, rotations in the following recommendations for that user, as the user will be already known to the system.cascadeCreate: true,
      }),
    ],
    {
      distinctRecomms?: boolean | undefineddistinctRecomms: true,
    },
  );
};

export default () => {
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex justify-center p-12">
      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="@container-normal">
        <const QuickSearchWidget: React.FunctionComponent<QuickSearchWidgetProps>Quick Search widget component
@publicQuickSearchWidget
          WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.apiClient: ApiClientInstance of Recombee JS API Client. See

{@link 
file://./#client-initialization Example
}
.
@publicapiClient={const apiClient: ApiClientapiClient}
          WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.createRequest: CreateRequestFunctionRequest factory function. See

{@link 
file://./#client-initialization Quick Example
}
 or visit

{@link 
file:///api API Reference
}
 for overview of available requests.
@publiccreateRequest={const createRequest: CreateRequestFunctioncreateRequest}
          minSearchCharactersCount: numberMinimum length of search query for search request to be sent.
@publicminSearchCharactersCount={3}
          primaryResultsIndex?: number | undefinedIndex of request in a batch from which the results are considered to be
navigable by arrow keys.
@publicprimaryResultsIndex={0}
          desktopMediaQuery: stringCSS media query specifing when the widget should behave as displayed on
desktop. By default, widget behaves as mobile-first, filling entire
device screen with results dropdown.
@publicdesktopMediaQuery="(min-width: 1000px)"
          type InputComponent: React.FC<InputProps>Component responsible for rendering the widget input.
@publicInputComponent={(props: InputPropsprops) => (
            <React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form React.HTMLAttributes<T>.className?: string | undefinedclassName="flex w-[400px] text-[#374040]">
              <const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput
                state: QuickSearchWidgetStatestate={props: InputPropsprops.state: QuickSearchWidgetStatestate}
                inputProps?: {
    placeholder?: string;
} | undefinedinputProps={{ placeholder?: string | undefinedplaceholder: `Search for "table"...` }}
              />
            </React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form>
          )}
          type TriggerComponent: React.FC<TriggerProps>Component responsible for rendering the widget trigger on mobile devices.
@publicTriggerComponent={(props: TriggerPropsprops) => (
            <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button
              {...props: TriggerPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.triggerProps: {
    ref: (element: HTMLElement | null) => void;
    onClick: () => void;
}Properties to be passed to the trigger button of a mobile widget.
@publictriggerProps}
              React.HTMLAttributes<T>.className?: string | undefinedclassName="flex size-[38px] items-center justify-center rounded-sm bg-[#3bc4a1] text-white"
            >
              <function SearchIcon(): React.JSX.ElementSearchIcon />
            </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
          )}
          type DropdownComponent: React.FC<DropdownProps>Component responsible for rendering the widget dropdown.
@publicDropdownComponent={(props: DropdownPropsprops) => (
            <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="mt-1 flex h-full max-h-full min-h-0 flex-col rounded-sm bg-white text-[#374040] shadow-2xl lg:h-auto lg:max-w-[900px] lg:min-w-[600px]">
              {!props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.isDesktop: booleanIndicates that the widget is displayed on desktop device.
@publicisDesktop && (
                <React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form React.HTMLAttributes<T>.className?: string | undefinedclassName="flex items-center gap-2 p-2">
                  <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex-grow">
                    <const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput
                      state: QuickSearchWidgetStatestate={props: DropdownPropsprops.state: QuickSearchWidgetStatestate}
                      inputProps?: {
    placeholder?: string;
} | undefinedinputProps={{ placeholder?: string | undefinedplaceholder: `Search for "table"...` }}
                    />
                  </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                  <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button
                    {...props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.closeButtonProps: {
    type: "button";
    onClick: () => void;
    onTouchEnd: () => void;
}Properties to be passed to the close button of a mobile dropdown.
@publiccloseButtonProps}
                    React.HTMLAttributes<T>.className?: string | undefinedclassName="flex size-[38px] items-center justify-center"
                  >
                    <function CloseIcon(): React.JSX.ElementCloseIcon />
                  </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
                </React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form>
              )}
              <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex">
                <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex min-h-0 flex-col">
                  <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="px-4 py-4 pb-2 text-sm font-semibold text-[#3f91ff]">
                    Segments
                  </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                  <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="overflow-auto p-2">
                    {props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.items: (index: number) => {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]Getter for current results of the request batch. The `index` parameter
indicates an index of results in the Batch Request for which to return
items.
@publicitems(1).Array<{ key: string; id: string; recommId: string; values: { [key: string]: any; }; itemProps: { tabIndex: number; "data-search-result-id"?: string | undefined; onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void; }; }>.map<React.JSX.Element>(callbackfn: (value: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}, index: number, array: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item) => (
                      <React.JSX.IntrinsicElements.a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>a
                        React.Attributes.key?: React.Key | null | undefinedkey={item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.key: stringkey}
                        React.AnchorHTMLAttributes<HTMLAnchorElement>.href?: string | undefinedhref={function addRecommIdQueryParam(url: string, recommId: string | undefined): stringUtility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam(
                          `${item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anylink}`,
                          item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.recommId: stringrecommId,
                        )}
                        {...item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.itemProps: {
    tabIndex: number;
    "data-search-result-id"?: string | undefined;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
}itemProps}
                        React.HTMLAttributes<T>.className?: string | undefinedclassName="flex items-center gap-2 rounded-sm p-2 text-nowrap outline-hidden hover:bg-[#f7f7f7] focus:bg-[#f7f7f7]"
                      >
                        <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex-grow">
                          <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="font-semibold">{item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.id: stringid}</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                        </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                      </React.JSX.IntrinsicElements.a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>a>
                    ))}
                  </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="flex min-h-0 flex-grow flex-col">
                  <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="px-4 py-4 pb-2 text-sm font-semibold text-[#3f91ff]">
                    Results
                  </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                  <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="overflow-auto p-2">
                    {props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.items: (index: number) => {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]Getter for current results of the request batch. The `index` parameter
indicates an index of results in the Batch Request for which to return
items.
@publicitems(0).Array<{ key: string; id: string; recommId: string; values: { [key: string]: any; }; itemProps: { tabIndex: number; "data-search-result-id"?: string | undefined; onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void; }; }>.map<React.JSX.Element>(callbackfn: (value: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}, index: number, array: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item) => (
                      <const DefaultItem: ((props: {
    href?: string;
    image?: React.ReactNode;
    primaryContent?: React.ReactNode;
    secondaryContent?: React.ReactNode;
    highlightedContent?: React.ReactNode;
}) => React.JSX.Element) & {
    ...;
}DefaultItem
                        React.Attributes.key?: React.Key | null | undefinedkey={item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.key: stringkey}
                        href?: string | undefinedhref={function addRecommIdQueryParam(url: string, recommId: string | undefined): stringUtility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam(
                          `${item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anylink}`,
                          item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.recommId: stringrecommId,
                        )}
                        image?: React.ReactNodeimage={
                          <const ItemImage: React.FunctionComponent<ItemImageProps>Item image component
@publicItemImage
                            className?: string | undefinedImage wrapper class name
@publicclassName="size-16 overflow-hidden rounded-lg"
                            src?: string | null | undefinedImage URL
@publicsrc={`${item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anyimage}`}
                            width?: number | undefinedImage width in pixels
@publicwidth={600}
                            height?: number | undefinedImage height in pixels
@publicheight={400}
                          />
                        }
                        primaryContent?: React.ReactNodeprimaryContent={item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anyproduct_title}
                        secondaryContent?: React.ReactNodesecondaryContent={item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anycategory_top}
                        highlightedContent?: React.ReactNodehighlightedContent={`USD ${item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.values: {
    [key: string]: any;
}values?.__type[string]: anyprice}`}
                        {...item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.itemProps: {
    tabIndex: number;
    "data-search-result-id"?: string | undefined;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
}itemProps}
                      />
                    ))}
                  </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
                </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
              </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
            </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
          )}
        />
      </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
};

Copy

API Reference

const

QuickSearchWidget

Quick Search widget component

type

QuickSearchWidgetProps

Quick Search component configuration options

Properties

apiClient

ApiClient

Instance of Recombee JS API Client. See Example.

createRequest

QuickSearchCreateRequestFunction

Request factory function. See Quick Example or visit API Reference for overview of available requests.

onRecommResponse

WidgetRecommResponseCallback | undefined

Callback function allowing to intercept and inspect recommendation request+response made by widget.

TypeScript JavaScript

import React from "react";
import { const CarouselWidget: React.FunctionComponent<CarouselWidgetProps>Carousel widget React Component. See 
{@link 
CarouselWidgetProps
}
 for
configuration options.
@publicCarouselWidget } from "@recombee/carousel-widget-react";

<const CarouselWidget: React.FunctionComponent<CarouselWidgetProps>Carousel widget React Component. See 
{@link 
CarouselWidgetProps
}
 for
configuration options.
@publicCarouselWidget
  // ...ommited code...
  WidgetConfigurationBase<CreateRequestFunction>.onRecommResponse?: WidgetRecommResponseCallback | undefinedCallback function allowing to intercept and inspect recommendation
request+response made by widget.

```tsx|-react
import React from "react";
import { CarouselWidget } from "@recombee/carousel-widget-react";

//
@noErrors: 2739 2345
<CarouselWidget
// ...ommited code...
onRecommResponse={({ recombeeRequest, recombeeResponse }) => {
// use data from request and response for any purpose, i.e. internal tracking
}}
/>;
```

```ts|-js
import React from "react";
import { CarouselWidget } from "@recombee/carousel-widget-js";

//@noErrors: 2739 2345
CarouselWidget({
// ...ommited code...
onRecommResponse: ({ recombeeRequest, recombeeResponse }) => {
// use data from request and response for any purpose, i.e. internal tracking
},
});
```@publiconRecommResponse={({ recombeeRequest: RequestrecombeeRequest, recombeeResponse: anyrecombeeResponse }) => {
    // use data from request and response for any purpose, i.e. internal tracking
  }}
/>;

Copy

initialQuery

string | undefined

String to be prefilled into the search input

minSearchCharactersCount

number

Minimum length of search query for search request to be sent.

typingDebounceDuration

number | undefined

Maximum duration between keystrokes in milliseconds before search request is made.

primaryResultsIndex

number | undefined

Index of request in a batch from which the results are considered to be navigable by arrow keys.

InputComponent

FC<InputProps>

Component responsible for rendering the widget input.

TriggerComponent

FC<TriggerProps>

Component responsible for rendering the widget trigger on mobile devices.

DropdownComponent

FC<DropdownProps>

Component responsible for rendering the widget dropdown.

desktopMediaQuery

string

CSS media query specifing when the widget should behave as displayed on desktop. By default, widget behaves as mobile-first, filling entire device screen with results dropdown.

class

QuickSearchWidgetState

Class exposing quick search widget state for use in custom templates

Properties

isDesktop

boolean

Indicates that the widget is displayed on desktop device.

reset

() => void

Resets the widget to its initial state

inputProps

{ value: string; onChange: (event: ChangeEvent<HTMLInputElement>) => void; onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void; onClick: () => void; ref: (element: HTMLElement | null) => void; }

Properties to be passed to a input component.

triggerProps

{ ref: (element: HTMLElement | null) => void; onClick: () => void; }

Properties to be passed to the trigger button of a mobile widget.

closeButtonProps

{ type: "button"; onClick: () => void; onTouchEnd: () => void; }

Properties to be passed to the close button of a mobile dropdown.

items

(index: number) => { key: string; id: string; recommId: string; values: { [key: string]: any; }; itemProps: { tabIndex: number; "data-search-result-id"?: string | undefined; onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void; }; }[]

Getter for current results of the request batch. The index parameter indicates an index of results in the Batch Request for which to return items.

isExpanded

boolean

Boolean flag indicating that the widget dropdown is open.

isLoading

boolean

Boolean flag indicating that a request for new results is in flight.

const

ItemImage

Item image component

type

ItemImageProps

Item Image properties

Properties

src

string | null | undefined

Image URL

missingImageSrc

string | undefined

URL of an image to display when the main image could not be loaded.

className

string | undefined

Image wrapper class name

imgClassName

string | undefined

Image class name

width

number | undefined

Image width in pixels

height

number | undefined

Image height in pixels

verticalAlignment

"top" | "center" | "bottom" | undefined

Image vertical alignment

horizontalAlignment

"center" | "left" | "right" | undefined

Image horizontal alignment

fittingAlgorithm

"cover" | "scale_down" | undefined

Image fitting algorithm

function

addRecommIdQueryParam

Utility function to append recombee_recomm_id parameter to an url string. For usage in widget template to construct item link URL.