### useProducts Hook for Fetching Products (React)

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useProducts

The useProducts hook allows you to fetch product data by their IDs and filter by stock availability. It makes a GET request to `/api/get_products`. This hook is useful for displaying product lists or details within a React application. Ensure the SDK is properly installed and configured.

```javascript
function ProductList() {
  const { data, isLoading, error } = useProducts({
    productIds: ['prod_123', 'prod_456'],
    inStock: true
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {data?.products.map(product => (
        <div key={product.id}>{product.title}</div>
      ))}
    </div>
  );
}
```

--------------------------------

### useSearchProducts Hook Example - React

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useSearchProducts

Demonstrates how to use the useSearchProducts hook to implement a search bar and display product results. It handles loading and error states, and uses cursor-based pagination implicitly via the hook's implementation.

```javascript
import React, { useState } from 'react';
import { useSearchProducts } from '@makerinc/react-sdk';

function SearchPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const { data, isLoading, error } = useSearchProducts({
    query: searchQuery,
    limit: 20
  });

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="Search products..."
      />
      {isLoading && <div>Searching...</div>}
      {error && <div>Error: {error.message}</div>}
      {data?.products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// Assume ProductCard component is defined elsewhere
// const ProductCard = ({ product }) => <div>{product.name}</div>;
```

--------------------------------

### useCategoriesByProduct Hook Example (React)

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useCategoriesByProduct

An example demonstrating how to use the `useCategoriesByProduct` hook to display a product's breadcrumbs. It fetches category data based on a `productId` and handles loading states. The hook relies on the `@makerinc/react-sdk` and expects `productId` as an option.

```jsx
function ProductBreadcrumbs({ productId }: { productId: string }) {
  const { data, isLoading } = useCategoriesByProduct({ productId });

  if (isLoading) return <div>Loading...</div>;

  return (
    <nav>
      {data?.categories.map((category, i) => (
        <span key={category.id}>
          {i > 0 && ' > '}
          <Link to={`/category/${category.id}`}>{category.title}</Link>
        </span>
      ))}
    </nav>
  );
}
```

--------------------------------

### Fetch Single Product using useProduct Hook (React)

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useProduct

The useProduct hook fetches a single product using its ID. It calls the `GET /api/get_products` endpoint. It takes a productId string and optional options as parameters, and returns product data, loading state, and error information. This hook is useful for displaying details of a specific product.

```javascript
function ProductDetail({ productId }: { productId: string }) {
  const { product, isLoading, error } = useProduct(productId);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!product) return <div>Product not found</div>;

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}
```

--------------------------------

### useRelatedProducts Hook Example - React

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useRelatedProducts

Example usage of the `useRelatedProducts` hook in a React component to display product recommendations. It handles loading states and maps over the returned product data to render `ProductCard` components. This hook is designed for React applications and relies on the `useRelatedProducts` function provided by the SDK.

```javascript
function RelatedProducts({ productId }) {
  const { data, isLoading } = useRelatedProducts({ productId });

  if (isLoading) return <div>Loading recommendations...</div>;

  return (
    <div>
      <h2>You May Also Like</h2>
      <div className="grid">
        {data?.products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

```

--------------------------------

### Fetch Markets with useMarkets Hook (React)

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useMarkets

The useMarkets hook fetches available markets (currencies or countries) for use in picker UIs. It calls the `GET /api/get_markets` endpoint and returns a UseQueryResult containing market data. The hook accepts optional `UseMarketsOptions` and its output is typed as `GetMarketsResponse`. The example demonstrates conditional rendering based on market type (Currencies or Countries) and populating select elements.

```javascript
function MarketPicker() {
  const { data, isLoading } = useMarkets();

  if (isLoading) return <div>Loading markets...</div>;
  if (!data?.choices) return null;

  if (data.choices[0] === 'Currencies') {
    const [, options] = data.choices;
    return (
      <select defaultValue={options.suggestedCurrency}>
        {options.availableCurrencies.map(currency => (
          <option key={currency} value={currency}>{currency}</option>
        ))}
      </select>
    );
  }

  if (data.choices[0] === 'Countries') {
    const [, options] = data.choices;
    return (
      <select defaultValue={options.suggestedCountry}>
        {options.availableCountries.map(country => (
          <option key={country} value={country}>{country}</option>
        ))}
      </select>
    );
  }

  return <div>Markets not supported</div>;
}

```

--------------------------------

### useCategories Hook

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useCategories

Fetches all categories/collections from the store. This hook calls the `GET /api/get_categories` endpoint.

```APIDOC
## GET /api/get_categories

### Description
Fetches all categories or collections available in the store. This endpoint is used by the `useCategories` React hook.

### Method
GET

### Endpoint
/api/get_categories

### Parameters
#### Query Parameters
- **options** (UseCategoriesOptions) - Optional - An object containing options for fetching categories.

### Request Example
```javascript
// This is an example of how to use the hook, not a direct API request.
import { useCategories } from '@makerinc/react-sdk';

function CategoryList() {
  const { data, isLoading, error } = useCategories();

  if (isLoading) return <div>Loading categories...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>Categories</h2>
      {data?.categories.map(category => (
        <div key={category.id}>
          <h3>{category.name || category.title}</h3>
          <p>{category.productsCount} products</p>
          {category.link && (
            <a href={category.link}>View Collection</a>
          )}
        </div>
      ))}
    </div>
  );
}
```

### Response
#### Success Response (200)
- **categories** (array) - An array of category objects. Each object may contain:
  - **id** (string) - The unique identifier for the category.
  - **name** (string) - The name of the category.
  - **title** (string) - An alternative title for the category.
  - **productsCount** (number) - The number of products in the category.
  - **link** (string) - An optional link to view the collection.

#### Response Example
```json
{
  "categories": [
    {
      "id": "cat_123",
      "name": "T-Shirts",
      "title": "Cool T-Shirts",
      "productsCount": 50,
      "link": "/collections/t-shirts"
    },
    {
      "id": "cat_456",
      "name": "Hoodies",
      "productsCount": 30
    }
  ]
}
```
```

--------------------------------

### useRelatedProducts Hook

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useRelatedProducts

Fetches product recommendations using native platform recommendations or fallback search. This hook makes a GET request to the /api/get_related_products endpoint.

```APIDOC
## GET /api/get_related_products

### Description
Fetches product recommendations using native platform recommendations or fallback search. This endpoint is used by the `useRelatedProducts` React hook.

### Method
GET

### Endpoint
`/api/get_related_products`

### Parameters
#### Query Parameters
- **productId** (string) - Required - The ID of the product for which to fetch recommendations.

### Request Example
No direct request example as this is typically called via the React hook.

### Response
#### Success Response (200)
- **products** (array) - An array of recommended product objects. Each product object may contain fields like `id`, `name`, `price`, `imageUrl`, etc.

#### Response Example
```json
{
  "products": [
    {
      "id": "prod_123",
      "name": "Example Product 1",
      "price": 19.99,
      "imageUrl": "/images/prod_123.jpg"
    },
    {
      "id": "prod_456",
      "name": "Example Product 2",
      "price": 29.99,
      "imageUrl": "/images/prod_456.jpg"
    }
  ]
}
```
```

--------------------------------

### GET /api/get_markets

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useMarkets

Fetches available markets, such as currencies or countries, which can be used in picker UIs.

```APIDOC
## GET /api/get_markets

### Description
This hook fetches a list of available markets, which can be either currencies or countries. The data returned is suitable for use in UI components like dropdowns or pickers.

### Method
GET

### Endpoint
/api/get_markets

### Parameters
#### Query Parameters
- **options** (UseMarketsOptions) - Optional - An object containing options for fetching markets. Defaults to an empty object.

### Request Body
This endpoint does not accept a request body.

### Response
#### Success Response (200)
- **choices** (Array<[string, Object]>) - An array where the first element indicates the type of market ('Currencies' or 'Countries'), and the second element is an object containing the market-specific options (e.g., `availableCurrencies`, `suggestedCurrency` or `availableCountries`, `suggestedCountry`).

#### Response Example
```json
{
  "choices": [
    "Currencies",
    {
      "suggestedCurrency": "USD",
      "availableCurrencies": ["USD", "EUR", "GBP"]
    }
  ]
}
```

```json
{
  "choices": [
    "Countries",
    {
      "suggestedCountry": "USA",
      "availableCountries": ["USA", "Canada", "Mexico"]
    }
  ]
}
```
```

--------------------------------

### Fetch Store Categories using useCategories Hook (React)

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useCategories

The useCategories hook fetches all categories and collections from the store. It makes a GET request to `/api/get_categories` and returns a UseQueryResult object containing the data, loading state, and error information. The hook accepts optional options for customization.

```javascript
import { useCategories } from '@makerinc/react-sdk';

function CategoryList() {
  const { data, isLoading, error } = useCategories();

  if (isLoading) return <div>Loading categories...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>Categories</h2>
      {data?.categories.map(category => (
        <div key={category.id}>
          <h3>{category.name || category.title}</h3>
          <p>{category.productsCount} products</p>
          {category.link && (
            <a href={category.link}>View Collection</a>
          )}
        </div>
      ))}
    </div>
  );
}

```

--------------------------------

### useCategoriesByProduct Hook

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useCategoriesByProduct

A hook to retrieve all categories associated with a specific product. It sorts the results by facet relevance and internally calls the GET /api/get_categories_by_product endpoint.

```APIDOC
## GET /api/get_categories_by_product

### Description
Retrieves all categories that contain a specific product, sorted by facet relevance.

### Method
GET

### Endpoint
`/api/get_categories_by_product`

### Parameters
#### Query Parameters
- **productId** (string) - Required - The ID of the product to find categories for.

### Request Example
```javascript
// This is an example of how to use the hook in a React component.
// The actual API call is made internally by the hook.
function ProductBreadcrumbs({ productId }: { productId: string }) {
  const { data, isLoading } = useCategoriesByProduct({ productId });

  if (isLoading) return <div>Loading...</div>;

  return (
    <nav>
      {data?.categories.map((category, i) => (
        <span key={category.id}>
          {i > 0 && ' > '}
          <Link to={`/category/${category.id}`}>{category.title}</Link>
        </span>
      ))}
    </nav>
  );
}
```

### Response
#### Success Response (200)
- **categories** (array) - An array of category objects, each containing 'id' and 'title'.
  - **id** (string) - The unique identifier for the category.
  - **title** (string) - The display name of the category.

#### Response Example
```json
{
  "categories": [
    {
      "id": "cat-123",
      "title": "Electronics"
    },
    {
      "id": "cat-456",
      "title": "Computers"
    }
  ]
}
```
```

--------------------------------

### GET /api/get_products_by_facet

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useProductsByFacet

The `useProductsByFacet` hook fetches products that match a specified facet value. It's designed to be used within React components to display filtered product lists.

```APIDOC
## GET /api/get_products_by_facet

### Description
Fetches products matching a specific facet value.

### Method
GET

### Endpoint
`/api/get_products_by_facet`

### Parameters
#### Query Parameters
- **facet** (string) - Required - The facet to filter products by (e.g., 'color=Blue').
- **limit** (number) - Optional - The maximum number of products to return.

### Request Example
```javascript
// Example usage within a React component
import { useProductsByFacet } from '@makerinc/react-sdk';

function ColorFilter() {
  const { data, isLoading } = useProductsByFacet({
    facet: 'color=Blue',
    limit: 50
  });

  return (
    <div>
      <h2>Blue Products</h2>
      {data?.products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}
```

### Response
#### Success Response (200)
- **products** (array) - An array of product objects matching the facet.
  - **id** (string) - The unique identifier for the product.

#### Response Example
```json
{
  "products": [
    {
      "id": "prod_123",
      "name": "Example Product",
      "price": 99.99
    }
  ]
}
```
```

--------------------------------

### Interface: UseSearchProductsOptions for Product Search

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/UseSearchProductsOptions

Defines the configuration options for searching products within the Maker Inc. React SDK. It allows specifying search parameters such as country, currency, query, and pagination details. Dependencies: None. Input: An object conforming to the interface. Output: Configured search parameters.

```typescript
interface UseSearchProductsOptions {
  country?: string;
  currency?: string;
  enabled?: boolean;
  fmt?: "google";
  limit?: number;
  page?: string;
  query?: string;
}
```

--------------------------------

### Product Interface Documentation

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/Product

Defines the core product type with variants, images, and metadata. It outlines all available properties, their types, and whether they are optional.

```APIDOC
## Product Interface

Core product type with variants, images, and metadata.

### Interface Definition
```typescript
interface Product {
  alternativeMarkets: Record<string, any>;
  bestSellerRank?: number | null;
  categoryId?: string | null;
  createdAt?: number | null;
  currency?: string | null;
  deletedAt?: number | null;
  description?: string | null;
  featuredRank?: number | null;
  id: string;
  images: Image[];
  lastImportedAt?: number | null;
  lastModifiedAt?: number | null;
  link?: string | null;
  market?: string | null;
  media: Media[];
  metadata: Record<string, Metadata>;
  name?: string | null;
  options: Option[];
  productType?: string | null;
  promoText?: string | null;
  reviewSummary?: any;
  tags: string[];
  taxonomy?: string | null;
  v: number;
  variants: Variant[];
}
```

### Properties

- **alternativeMarkets** (Record<string, any>) - An object containing alternative market data.
- **bestSellerRank?** (number | null) - An optional number representing the best seller rank.
- **categoryId?** (string | null) - An optional string representing the category ID.
- **createdAt?** (number | null) - An optional number representing the creation timestamp.
- **currency?** (string | null) - An optional string representing the currency.
- **deletedAt?** (number | null) - An optional number representing the deletion timestamp.
- **description?** (string | null) - An optional string containing raw HTML description. Special handling is required for rendering.
  - **Rendering Note**: This field must be rendered using the `renderDescription()` utility function from `@makerinc/react-sdk` to correctly handle HTML markup, escape sequences, template variables, and whitespace.
  - **Example Usage**:
    ```javascript
    import { renderDescription } from '@makerinc/react-sdk';

    // Assuming 'product' is your product object
    {product.description && renderDescription({
      text: product.description,
      product,
    })}
    ```
- **featuredRank?** (number | null) - An optional number representing the featured rank.
- **id** (string) - The unique identifier for the product.
- **images** (Image[]) - An array of Image objects associated with the product.
- **lastImportedAt?** (number | null) - An optional number representing the last imported timestamp.
- **lastModifiedAt?** (number | null) - An optional number representing the last modified timestamp.
- **link?** (string | null) - An optional string representing a link associated with the product.
- **market?** (string | null) - An optional string representing the market the product belongs to.
- **media** (Media[]) - An array of Media objects associated with the product.
- **metadata** (Record<string, Metadata>) - An object containing metadata for the product.
- **name?** (string | null) - An optional string representing the name of the product.
- **options** (Option[]) - An array of Option objects for product customization.
- **productType?** (string | null) - An optional string representing the type of the product.
- **promoText?** (string | null) - An optional string containing promotional text.
- **reviewSummary?** (any) - An optional field for review summary data.
- **tags** (string[]) - An array of strings representing tags associated with the product.
- **taxonomy?** (string | null) - An optional string representing the product's taxonomy.
- **v** (number) - A version number for the product data.
- **variants** (Variant[]) - An array of Variant objects for product variations.
```

--------------------------------

### Render Product Description

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/Product

Utility function to safely render the product description, handling HTML markup, escape sequences, template variables, and whitespace. Requires the 'renderDescription' utility from the SDK.

```javascript
import { renderDescription } from '@makerinc/react-sdk';

{product.description && renderDescription({
  text: product.description,
  product,
})}
```

--------------------------------

### UseSearchProductsOptions Interface

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/UseSearchProductsOptions

The `UseSearchProductsOptions` interface defines the available configuration options for searching products within the MakerInc React SDK.

```APIDOC
## Interface UseSearchProductsOptions

### Description
Defines the configuration options for searching products.

### Properties

#### `country` (string) - Optional
Country code for contextual pricing (e.g., 'US', 'CA').

#### `currency` (string) - Optional
Currency code for prices (e.g., 'USD', 'EUR').

#### `enabled` (boolean) - Optional
Enable or disable the query (default: true).

#### `fmt` ("google") - Optional
Return data in Google Product Feed format.

#### `limit` (number) - Optional
Maximum number of products to return (default: 20).

#### `page` (string) - Optional
Pagination cursor from `page.next` or `page.previous`.

#### `query` (string) - Optional
Search query string.

### Example Usage (Conceptual)
```javascript
const options = {
  country: 'US',
  currency: 'USD',
  limit: 50,
  query: 'react sdk'
};

// Assuming useSearchProducts hook exists
// const { products, loading, error } = useSearchProducts(options);
```
```

--------------------------------

### Render Product Descriptions with HTML and Variables (React)

Source: https://makerinc.github.io/react-sdk/typedoc/functions/renderDescription

Renders product or variant descriptions, supporting HTML content, literal backslash escape sequences (like \r, \n, \t), and template variable substitution (e.g., ${product.id}). It preserves whitespace using 'pre-wrap' and handles rich text rendering via dangerouslySetInnerHTML. This function is useful for displaying dynamic product details with formatting.

```javascript
import { renderDescription } from '@makerinc/react-sdk';

function ProductCard({ product }) {
  return (
    <div>
      <h2>{product.name}</h2>
      {renderDescription({
        text: product.description || '',
        product,
        isRichText: true,
        isPreWrapped: true
      })}
    </div>
  );
}
```

--------------------------------

### useProducts Hook

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useProducts

The `useProducts` hook fetches product data based on provided options. It simplifies the process of retrieving product information, including filtering by IDs and stock availability.

```APIDOC
## useProducts Hook

### Description
Hook to fetch products by their IDs. This hook makes a GET request to the `/api/get_products` endpoint.

### Method
GET

### Endpoint
/api/get_products

#### Query Parameters
- **productIds** (string[]) - Required - An array of product IDs to fetch.
- **inStock** (boolean) - Optional - If true, only products currently in stock will be returned.

### Request Example
```javascript
const { data, isLoading, error } = useProducts({
  productIds: ['prod_123', 'prod_456'],
  inStock: true
});
```

### Response
#### Success Response (200)
- **products** (object[]) - An array of product objects. Each product object contains details such as id, title, etc.

#### Response Example
```json
{
  "products": [
    {
      "id": "prod_123",
      "title": "Example Product 1",
      "price": 19.99,
      "inStock": true
    },
    {
      "id": "prod_456",
      "title": "Example Product 2",
      "price": 29.99,
      "inStock": false
    }
  ]
}
```
```

--------------------------------

### Fetch Multiple Products using useProducts Hook (JavaScript)

Source: https://makerinc.github.io/react-sdk/demo

The `useProducts` hook retrieves data for multiple products based on an array of product IDs. It provides the fetched data, loading status, and error information. Input is an object containing a `productIds` array.

```javascript
const { data, isLoading, error } = useProducts({ productIds: ['6778762494026', '6778762756170', '6778764755018'] })
```

--------------------------------

### UseCategoriesOptions Interface

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/UseCategoriesOptions

Configuration options for fetching categories. These options allow fine-grained control over the category fetching process, including pagination and sorting.

```APIDOC
## Interface UseCategoriesOptions

This interface defines the options available when fetching categories using the MakerInc React SDK.

### Properties

- **enabled** (boolean) - Optional - Enable or disable the query (default: true).
- **limit** (number) - Optional - Maximum number of categories to return.
- **page** (string) - Optional - Pagination cursor from page.next or page.previous.
- **reverse** (boolean) - Optional - Reverse the sort order (default: false).

### Example

```typescript
{
  enabled: false,
  limit: 10,
  page: "next_page_cursor",
  reverse: true
}
```
```

--------------------------------

### UseProductsOptions Interface

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/UseProductsOptions

Defines the options that can be passed to the `useProducts` hook to filter and customize product retrieval. This includes parameters for geographical context, currency, stock availability, language, and specific product identifiers.

```APIDOC
## Interface UseProductsOptions

This interface defines the configuration options for fetching products.

### Properties

*   **`country`** (string) - Optional - Country code for contextual pricing (e.g., 'US', 'CA').
*   **`currency`** (string) - Optional - Currency code for prices (e.g., 'USD', 'EUR').
*   **`enabled`** (boolean) - Optional - Enable or disable the query (default: true).
*   **`inStock`** (boolean) - Optional - Only return products that are in stock.
*   **`language`** (string) - Optional - Language code for localization (e.g., 'en', 'es').
*   **`productIds`** (string | string[]) - Required - Product IDs to fetch (max 100).
```

--------------------------------

### Fetch Products by Facet using useProductsByFacet Hook (JavaScript)

Source: https://makerinc.github.io/react-sdk/demo

The `useProductsByFacet` hook retrieves products based on a specified facet (e.g., 'Women_Accessories'). It returns the product data, loading status, and error information. The hook requires a `facet` string and a `limit` number.

```javascript
const { data, isLoading, error } = useProductsByFacet({ facet: "Women_Accessories", limit: 6 })
```

--------------------------------

### GetProductsByCategoryResponse Interface

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/GetProductsByCategoryResponse

Defines the structure of the response when fetching products by category. It includes sorting options, filters, pagination details, the list of products, synchronization status, and the total count of products.

```APIDOC
## GetProductsByCategoryResponse Interface

### Description
This interface represents the structured response received when a request is made to retrieve products filtered by a specific category. It contains information about available sorting options, filtering criteria, pagination metadata, the actual list of products, and the overall synchronization status.

### Method
N/A (This is a data structure definition, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
- **availableSorts** (string[] | null) - An array of strings representing the available sorting options for the products. Can be null.
- **defaultSortOrder** (string | null) - The default sorting order for the products. Can be null.
- **filters** (ProductFilters | null) - An object containing the filters applied to the product list. Can be null.
- **page** (PageMeta) - An object containing pagination metadata, such as current page number and items per page.
- **products** (Product[]) - An array of Product objects.
- **syncStatus** (SyncStatus | null) - An object indicating the synchronization status of the product data. Can be null.
- **total** (number | null) - The total number of products available that match the query criteria. Can be null.

#### Response Example
```json
{
  "availableSorts": ["price", "name"],
  "defaultSortOrder": "asc",
  "filters": {
    "color": "blue",
    "size": "M"
  },
  "page": {
    "currentPage": 1,
    "totalPages": 10,
    "pageSize": 20
  },
  "products": [
    {
      "id": "prod-123",
      "name": "Example Product",
      "price": 19.99
    }
  ],
  "syncStatus": {
    "lastSync": "2023-10-27T10:00:00Z",
    "status": "completed"
  },
  "total": 200
}
```
```

--------------------------------

### useSearchProducts Hook

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useSearchProducts

The useSearchProducts hook facilitates full-text product searches. It accepts an options object for query parameters and pagination, and returns a UseQueryResult containing the search results.

```APIDOC
## GET /api/search_products

### Description
Hook for full-text product search with cursor-based pagination. This endpoint allows you to search for products based on a given query string and retrieve results with pagination support.

### Method
GET

### Endpoint
`/api/search_products`

### Parameters
#### Query Parameters
- **query** (string) - Required - The full-text search query string.
- **limit** (number) - Optional - The maximum number of results to return per page.
- **after** (string) - Optional - A cursor for fetching the next page of results.

### Request Example
```javascript
// Example usage within a React component
import React, { useState } from 'react';
import { useSearchProducts } from '@makerinc/react-sdk';

function SearchPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const { data, isLoading, error } = useSearchProducts({
    query: searchQuery,
    limit: 20
  });

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="Search products..."
      />
      {isLoading && <div>Searching...</div>}
      {error && <div>Error: {error.message}</div>}
      {data?.products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// Assume ProductCard component is defined elsewhere
// const ProductCard = ({ product }) => <div>{product.name}</div>;
```

### Response
#### Success Response (200)
- **products** (array) - An array of product objects matching the search query.
  - **id** (string) - The unique identifier of the product.
  - **name** (string) - The name of the product.
  - **description** (string) - A brief description of the product.
  - ... (other product fields)
- **next_cursor** (string) - A cursor for fetching the next page of results. If null, there are no more pages.

#### Response Example
```json
{
  "products": [
    {
      "id": "prod_123",
      "name": "Example Product",
      "description": "This is a sample product."
    }
  ],
  "next_cursor": "cursor_abc123"
}
```
```

--------------------------------

### Fetch Available Markets using useMarkets Hook (JavaScript)

Source: https://makerinc.github.io/react-sdk/demo

The `useMarkets` hook retrieves a list of available markets. It returns the market data, loading state, and error information. This hook has no required parameters and fetches general market availability.

```javascript
const { data, isLoading, error } = useMarkets()
```

```json
{
  "choices": [
    "Countries",
    {
      "suggestedCountry": "US",
      "availableCountries": [
        "US"
      ]
    }
  ]
}
```

--------------------------------

### TypeScript Interface: UseProductsByCategoryOptions

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/UseProductsByCategoryOptions

Defines the structure for options when fetching products by category. It includes parameters for category ID, country, price range, stock status, language, sorting, and more. This interface is crucial for customizing product queries.

```typescript
interface UseProductsByCategoryOptions {
  categoryId: string;
  country?: string;
  createdWithin?: string;
  currency?: string;
  enabled?: boolean;
  facets?: string[];
  inStock?: boolean;
  language?: string;
  limit?: number;
  maxPrice?: number;
  minPrice?: number;
  sort?: SortOrder;
}
```

--------------------------------

### Fetch Products by Facet using useProductsByFacet (React)

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useProductsByFacet

The `useProductsByFacet` hook fetches products that match a given facet. It requires options including the facet string and a limit. It returns a `UseQueryResult` object containing product data or loading/error states. This hook simplifies the process of filtering and displaying products based on specific attributes.

```javascript
function ColorFilter() {
  const { data, isLoading } = useProductsByFacet({
    facet: 'color=Blue',
    limit: 50
  });

  return (
    <div>
      <h2>Blue Products</h2>
      {data?.products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}
```

--------------------------------

### Interface Product Definition

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/Product

Defines the structure of a product object within the Maker Inc React SDK. It includes details like ID, name, description, images, variants, and metadata.

```typescript
interface Product {
  alternativeMarkets: Record<string, any>;
  bestSellerRank?: number | null;
  categoryId?: string | null;
  createdAt?: number | null;
  currency?: string | null;
  deletedAt?: number | null;
  description?: string | null;
  featuredRank?: number | null;
  id: string;
  images: Image[];
  lastImportedAt?: number | null;
  lastModifiedAt?: number | null;
  link?: string | null;
  market?: string | null;
  media: Media[];
  metadata: Record<string, Metadata>;
  name?: string | null;
  options: Option[];
  productType?: string | null;
  promoText?: string | null;
  reviewSummary?: any;
  tags: string[];
  taxonomy?: string | null;
  v: number;
  variants: Variant[];
}
```

--------------------------------

### useProduct Hook

Source: https://makerinc.github.io/react-sdk/typedoc/functions/useProduct

The `useProduct` hook fetches a single product's details using its unique identifier. It also provides loading and error states for managing the asynchronous data fetching process.

```APIDOC
## useProduct Hook

### Description
Hook to fetch a single product by ID.

### Method
GET

### Endpoint
/api/get_products

### Parameters
#### Path Parameters
* None

#### Query Parameters
* **productId** (string) - Required - The unique identifier of the product to fetch.
* **options** (Omit<UseProductsOptions, "productIds">) - Optional - Additional options for fetching the product, excluding `productIds`.

#### Request Body
* None

### Request Example
```javascript
// Example usage within a React component
function ProductDetail({ productId }) {
  const { product, isLoading, error } = useProduct(productId);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!product) return <div>Product not found</div>;

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}
```

### Response
#### Success Response (200)
- **product** (object) - The details of the fetched product.
- **isLoading** (boolean) - Indicates if the data is currently being fetched.
- **error** (object | null) - An error object if the fetch failed, otherwise null.

#### Response Example
```json
{
  "product": {
    "id": "prod_123",
    "name": "Example Product",
    "description": "This is a sample product description."
  },
  "isLoading": false,
  "error": null
}
```
```

--------------------------------

### Fetch Products by Category with Filters using useProductsByCategory Hook (JavaScript)

Source: https://makerinc.github.io/react-sdk/demo

The `useProductsByCategory` hook allows fetching products within a specific category, with options for filtering and pagination. It returns product data, loading state, error, a `loadMore` function, and a `hasMore` flag. The input is a configuration object with category ID, limit, sort order, and other filter options.

```javascript
const { data, isLoading, error, loadMore, hasMore } = useProductsByCategory({
  categoryId: "all",
  limit: 5,
  inStock: undefined,
  sort: "default",
  facets: undefined,
  minPrice: undefined,
  maxPrice: undefined
})
```

--------------------------------

### Define UseProductsOptions Interface (TypeScript)

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/UseProductsOptions

Defines the TypeScript interface for UseProductsOptions, used to configure product queries in the MakerInc React SDK. It specifies optional parameters like country, currency, enabled status, inStock, and language, along with the required productIds.

```typescript
interface UseProductsOptions {
  country?: string;
  currency?: string;
  enabled?: boolean;
  inStock?: boolean;
  language?: string;
  productIds: string | string[];
}
```

--------------------------------

### RenderDescriptionOptions Interface Definition

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/RenderDescriptionOptions

Defines the structure for options used when rendering descriptions, including text content, product data, and styling properties. It allows for customization of whitespace preservation and HTML rendering.

```typescript
interface RenderDescriptionOptions {
  className?: string;
  isPreWrapped?: boolean;
  isRichText?: boolean;
  product: Product;
  style?: CSSProperties;
  text: string;
  variant?: Variant;
}
```

--------------------------------

### Fetch Single Product using useProduct Hook (JavaScript)

Source: https://makerinc.github.io/react-sdk/demo

The `useProduct` hook fetches details for a single product identified by its ID. It returns the product data, loading state, and any potential errors. The primary dependency is the product ID string.

```javascript
const { product, isLoading, error } = useProduct("6778762494026")
```

--------------------------------

### Interface Definition: UseProductsByFacetOptions (TypeScript)

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/UseProductsByFacetOptions

Defines the structure for options when querying products by facet. It includes optional boolean for enabling the query, a required string for the facet key-value pair, an optional number for the limit, and an optional string for pagination.

```typescript
interface UseProductsByFacetOptions {
  enabled?: boolean;
  facet: string;
  limit?: number;
  page?: string;
}
```

--------------------------------

### Fetch Related Products using useRelatedProducts Hook (JavaScript)

Source: https://makerinc.github.io/react-sdk/demo

The `useRelatedProducts` hook fetches product recommendations based on a given product ID. It returns the recommended product data, loading state, and error. The hook requires a `productId` string.

```javascript
const { data, isLoading, error } = useRelatedProducts({ productId: "6778762494026" })
```

--------------------------------

### TypeScript Interface for GetProductsByCategoryResponse

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/GetProductsByCategoryResponse

Defines the structure for the response when fetching products by category. It includes details about available sorting options, default sort order, filters, pagination metadata, the list of products, synchronization status, and the total count of products. This interface is essential for type-safe handling of product data.

```typescript
interface GetProductsByCategoryResponse {
  availableSorts?: string[] | null;
  defaultSortOrder?: string | null;
  filters?: ProductFilters | null;
  page: PageMeta;
  products: Product[];
  syncStatus?: SyncStatus | null;
  total?: number | null;
}
```

--------------------------------

### Category Interface Definition

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/Category

Defines the structure for a product category object, including its unique identifier, name, description, associated products count, and synchronization status. Optional fields like default sort order, images, and timestamps are also included.

```typescript
interface Category {
  defaultSortOrder?: SortOrder | null;
  description?: string | null;
  firstImportedAt?: number | null;
  id: string;
  image?: Image | null;
  lastImportedAt?: number | null;
  lastModifiedAt?: number | null;
  link?: string | null;
  name?: string | null;
  productsCount?: number | null;
  syncStatus?: CategorySyncStatus | null;
}
```

--------------------------------

### Store Interface Definition (TypeScript)

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/Store

Defines the structure for store objects, including platform type and access details. This interface is used to represent various e-commerce platform integrations.

```typescript
interface Store {
  id: string;
  platform: "Shopify" | "FeedSync" | "MakerLegacyGraphQL";
  platformUrl?: string | null;
  shopifyScopes?: string[] | null;
  shopifyStorefrontAccessToken?: string | null;
}
```

--------------------------------

### TypeScript Interface for Category Query Options

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/UseCategoriesOptions

Defines the structure for options used to configure category data retrieval in the React SDK. It includes boolean and numeric types for controlling query behavior and pagination.

```typescript
interface UseCategoriesOptions {
  enabled?: boolean;
  limit?: number;
  page?: string;
  reverse?: boolean;
}
```

--------------------------------

### Image Interface Definition (TypeScript)

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/Image

Defines the structure for an Image object used within the MakerInc React SDK. It includes optional fields for alt text, dimensions, and a required URL.

```typescript
interface Image {
  alt?: string | null;
  altText?: string | null;
  height?: number | null;
  size?: [number, number] | null;
  url: string;
  width?: number | null;
}
```

--------------------------------

### Variant Interface Definition

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/Variant

Defines the structure for a product variant, including optional fields for barcode, brand, pricing, and required fields like ID and inventory.

```typescript
interface Variant {
  barcode?: string | null;
  brand?: string | null;
  compareAtPrice?: string | null;
  customLabels: (string | null)[];
  description?: string | null;
  id: string;
  imageId?: string | null;
  inventory: { quantity?: number | null };
  link?: string | null;
  mediaIndex?: number | null;
  mediaIndexesSourcedFromVariant?: number[] | null;
  metadata: Record<string, Metadata>;
  mpn?: string | null;
  name?: string | null;
  option1?: string | null;
  option2?: string | null;
  option3?: string | null;
  price?: string | null;
  promoText?: string | null;
  sku?: string | null;
}
```

--------------------------------

### Fetch Product Categories using useCategoriesByProduct Hook (JavaScript)

Source: https://makerinc.github.io/react-sdk/demo

The `useCategoriesByProduct` hook retrieves the categories associated with a specific product ID. It provides the category data, loading status, and error information. The hook requires a `productId` string.

```javascript
const { data, isLoading, error } = useCategoriesByProduct({ productId: "6778762494026" })
```

--------------------------------

### Metadata Type Alias Definitions (TypeScript)

Source: https://makerinc.github.io/react-sdk/typedoc/types/Metadata

Defines the Metadata type alias used in the MakerInc React SDK. This alias encompasses a wide range of field types for product and variant metadata, including single-line text, multi-line text, decimal, integer, dimension, date, time, color, boolean, JSON, money, volume, weight, URL, rating, and various list types. Each type is strongly-typed for accurate data representation.

```typescript
export type Metadata =
  | { SingleLineTextField: string }
  | { MultiLineTextField: string }
  | { DecimalField: number }
  | { IntegerField: number }
  | { Dimension: { unitName: string; value: number } }
  | { Date: string }
  | { DateTime: string }
  | { Color: string }
  | { Boolean: boolean }
  | { Json: any }
  | { Money: { amount: string; currencyCode: string } }
  | { Volume: { unitName: string; value: number } }
  | { Weight: { unitName: string; value: number } }
  | { Url: string }
  | { Rating: { scale: number; value: number } }
  | { ListColor: string[] }
  | { ListDimension: { unitName: string; value: number }[] }
  | { ListSingleLineTextField: string[] }
  | { ListVolume: { unitName: string; value: number }[] }
  | { ListWeight: { unitName: string; value: number }[] }
  | { ListNumberDecimal: number[] }
  | { ListNumberInteger: number[] }
  | { Unsupported: null }
```

--------------------------------

### Define GetMarketsResponse Type Alias (TypeScript)

Source: https://makerinc.github.io/react-sdk/typedoc/types/GetMarketsResponse

This TypeScript type alias defines the structure for the GetMarketsResponse. It specifies that the 'choices' property can be an array representing currencies or countries with available and suggested options, or a 'NotSupported' string, or null. It is used to standardize market data responses within the SDK.

```typescript
type GetMarketsResponse = {
  choices: |
    [
      "Currencies",
      { availableCurrencies: string[]; suggestedCurrency: string },
    ]
    |
    [
      "Countries",
      { availableCountries: string[]; suggestedCountry: string },
    ]
    | ["NotSupported"]
    | null;
}
```

--------------------------------

### Interface Definition: SyncStatus (TypeScript)

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/SyncStatus

Defines the structure of the SyncStatus interface, which provides information about the status of data synchronization. It includes boolean flags indicating the presence of specific data types and timestamps/counts for the last synchronization.

```typescript
interface SyncStatus {
  hasSomeBestSellerRanks: boolean;
  hasSomeCreatedAtTimes: boolean;
  hasSomeDiscounts: boolean;
  hasSomeDiscountsInStock: boolean;
  hasSomeFeaturedRanks: boolean;
  lastCompletedAt?: number | null;
  lastCompletedCount: number;
}
```

--------------------------------

### Define GetRelatedProductsResponse Interface (TypeScript)

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/GetRelatedProductsResponse

This TypeScript interface defines the structure for the response when fetching related products. It includes optional fields for filtering and sorting, pagination details, the product list, and synchronization status.

```typescript
interface GetRelatedProductsResponse {
  availableFilters?: any;
  availableSorts?: any;
  counts?: any;
  defaultSortOrder?: any;
  page: PageMeta;
  products: Product[];
  syncStatus?: any;
  total?: number | null;
}
```

--------------------------------

### CategorySyncStatus Interface Definition (TypeScript)

Source: https://makerinc.github.io/react-sdk/typedoc/interfaces/CategorySyncStatus

Defines the structure of the CategorySyncStatus interface, used to represent the synchronization status of categories. It includes properties like item counts, completion status, and flags indicating the presence of specific data points (e.g., best sellers, discounts).

```typescript
interface CategorySyncStatus {
  count: number;
  deletedAt?: number | null;
  hasSomeBestSellerRanks: boolean;
  hasSomeCreatedAtTimes: boolean;
  hasSomeDiscounts: boolean;
  hasSomeDiscountsInStock: boolean;
  hasSomeFeaturedRanks: boolean;
  isComplete: boolean;
  lastCompletedAt?: number | null;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.