Makerinc React SDK

https://www.npmjs.com/package/@makerinc/react-sdk
Admin
A React hooks library that provides type-safe access to the Maker Connected Store Product API,...
Tokens:11,980
Snippets:128
Trust Score:9.6
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install @makerinc/react-sdk using npm or yarn

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

Instructions for installing the @makerinc/react-sdk package using either npm or yarn package managers. This is the initial step before integrating the library into a React project.

```bash
npm install @makerinc/react-sdk
# or
yarn add @makerinc/react-sdk
```

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

### Fetch a single product using useProduct hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=readme

This example shows how to use the `useProduct` hook to fetch a single product's data by its ID. It includes logic for handling loading states, errors, and displaying product information. Optional parameters like `inStock`, `country`, and `currency` can be provided.

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

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>Not found</div>;

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

function ProductPage({ id }) {
  const { product, isLoading, error } = useProduct(id, {
    inStock: true,
    country: 'US',
  });

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

  return <div>{product?.name}</div>;
}
```

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

### Development Commands for NPM Project

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

Standard npm commands for managing a project: 'npm install' for dependencies, 'npm run build' for building the project, 'npm test' for running tests, and 'npm run lint' for type checking. These are common for Node.js/React projects.

```bash
# Install
npm install

# Build
npm run build

# Tests
npm test

# Type check
npm run lint
```

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

### Fetch Single Product with Options using useProduct Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

Illustrates using the `useProduct` hook with optional parameters to filter the product data. This example fetches a product only if it's in stock and specifies the country for pricing context.

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

function ProductPage({ id }) {
  const { product, isLoading, error } = useProduct(id, {
    inStock: true,
    country: 'US',
  });

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

  return <div>{product?.name}</div>;
}
```

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

### Fetch Categories using useCategories Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

Example of using the `useCategories` hook to fetch a list of product categories. The snippet shows how to retrieve category data and track the loading state of the request.

```javascript
const { data, isLoading } = useCategories({ limit: 10 });
```

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

### Fetch Multiple Products using useProducts Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

Shows how to use the `useProducts` hook to fetch a list of products by their IDs. The example demonstrates iterating over the fetched data to render a list of `ProductCard` components and includes basic loading state handling.

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

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

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

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

### Fetch Single Product using useProduct Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

Example of using the `useProduct` hook to fetch a single product's details by its ID. It shows how to handle loading, error, and data states to display product information or relevant messages.

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

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>Not found</div>;

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

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

### Fetch Products by Category using useProductsByCategory Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

Example of using the `useProductsByCategory` hook to retrieve products belonging to a specific category. It includes functionality for pagination with `loadMore` and `hasMore` states, along with handling loading and fetching states.

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

function CategoryPage({ categoryId }) {
  const { data, isLoading, loadMore, hasMore, isFetchingMore } = useProductsByCategory({
    categoryId,
    limit: 24,
  });

  return (
    <div>
      {data?.products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
      {hasMore && (
        <button onClick={loadMore} disabled={isFetchingMore}>
          {isFetchingMore ? 'Loading...' : 'Load More'}
        </button>
      )}
    </div>
  );
}
```

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

### Get Categories for a Product using useCategoriesByProduct Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

Shows how to use the `useCategoriesByProduct` hook to retrieve the categories associated with a given product ID. The example includes accessing the category data and the loading state.

```javascript
const { data, isLoading } = useCategoriesByProduct({ productId: '123' });
```

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

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

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

The `useProductsByFacet` hook fetches products based on a specified facet. It returns data and loading state. Example usage demonstrates how to call the hook with a facet option. No specific dependencies are mentioned other than the React SDK itself.

```javascript
const { data, isLoading } = useProductsByFacet({ facet: 'Women_Accessories' });
```

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

### MakerProvider Component

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=code

The MakerProvider component is the entry point for the SDK. It should wrap your application to provide the necessary context for all other hooks.

```APIDOC
## MakerProvider

### Description
Wraps your application to provide necessary context for the Maker SDK.

### Usage
```jsx
import { MakerProvider } from '@makerinc/react-sdk';

function App() {
  return (
    <MakerProvider accountId="your-account-id">
      <YourApp />
    </MakerProvider>
  );
}
```

### Props
#### accountId
- **accountId** (string) - Required - Your Maker account identifier.
```

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

### Search Products using useSearchProducts Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

Demonstrates a basic implementation of the `useSearchProducts` hook to search for products based on a query string and a specified limit. It shows how to access the search results and loading state.

```javascript
const { data, isLoading } = useSearchProducts({ query: 'shirt', limit: 20 });
```

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

### Initialize MakerProvider in React App

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

Demonstrates how to wrap the root of a React application with the `MakerProvider` component. This component is essential for initializing the SDK and providing the necessary `accountId` for subsequent hook usage.

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

function App() {
  return (
    <MakerProvider accountId="your-account-id">
      <YourApp />
    </MakerProvider>
  );
}
```

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

### useCategories Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=code

Fetches a list of available categories.

```APIDOC
## useCategories(options?)

### Description
Fetch a list of available product categories.

### Method
useCategories

### Parameters
#### Query Parameters
- **options** (object) - Optional configuration for fetching categories.
  - **limit** (number) - Optional - The maximum number of categories to return.
  - **enabled** (boolean) - Optional - Enable or disable query execution.

### Returns
An object containing:
- **data** (array | null) - An array of category objects, or null.
- **isLoading** (boolean) - True if the category list is currently being fetched.

### Request Example
```jsx
import { useCategories } from '@makerinc/react-sdk';

function CategoryList() {
  const { data, isLoading } = useCategories({ limit: 10 });

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

  return (
    <ul>
      {data?.map((category) => (
        <li key={category.id}>{category.name}</li>
      ))}
    </ul>
  );
}
```
```

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

### useMarkets Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=versions

Fetches available markets for user selection. The response includes currencies or countries based on store configuration.

```APIDOC
## `useMarkets()`

### Description
Fetch available markets for user selection. Returns currencies OR countries based on store configuration.

### Method
Not Applicable (Hook)

### Endpoint
Not Applicable (Hook)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
function MarketPicker() {
  const { data } = useMarkets();

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

  return null;
}
```

### Response
#### Success Response (200)
- **data** (object) - Contains market choices, which can be currencies or countries.

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

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

### useProducts Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=code

Fetches multiple products based on a list of product IDs. Supports filtering and localization.

```APIDOC
## useProducts(options)

### Description
Fetch multiple products by providing an array of product IDs (maximum 100).

### Method
useProducts

### Parameters
#### Request Body
- **options** (object) - Required - Configuration for fetching products.
  - **productIds** (string | string[]) - Required - One or more product IDs to fetch.
  - **inStock** (boolean) - Optional - Filter to return only in-stock products.
  - **fmt** (string) - Optional - Specify the response format (e.g., 'google').
  - **currency** (string) - Optional - Currency code for pricing.
  - **country** (string) - Optional - Country code for contextual pricing.
  - **language** (string) - Optional - Language code for localization.
  - **enabled** (boolean) - Optional - Enable or disable query execution.

### Returns
An object containing:
- **data** (array | null) - An array of product objects, or null.
- **isLoading** (boolean) - True if the initial data is being fetched.

### Request Example
```jsx
import { useProducts } from '@makerinc/react-sdk';

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

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

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

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

### MakerProvider Component

Source: https://www.npmjs.com/package/@makerinc/react-sdk/index

The MakerProvider component is a React context provider that should wrap your application to enable the use of Maker SDK hooks. It requires an `accountId` to initialize.

```APIDOC
## MakerProvider

### Description

Wraps your application with the Maker context, providing necessary configuration like the account ID.

### Component

`<MakerProvider>`

### Props

#### `accountId` (string) - Required

The unique identifier for your Maker account.

### Usage Example

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

function App() {
  return (
    <MakerProvider accountId="your-account-id">
      <YourApp />
    </MakerProvider>
  );
}
```
```

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

### useSearchProducts Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependents

Provides functionality to search for products based on a query string and other optional parameters.

```APIDOC
## useSearchProducts(options?)

### Description
Search for products using a query string and optional parameters like limit.

### Method
`useSearchProducts`

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

#### Query Parameters
N/A

#### Request Body
N/A

#### Hook Parameters
- **options** (object) - Optional - Configuration options:
  - **query** (string) - Required - The search query string.
  - **limit** (number) - Optional - The maximum number of results to return.
  - **enabled** (boolean) - Optional - If true, enables the query execution; otherwise, it's disabled.

### Returns
An object containing:
- **data** (Array<object> | null) - An array of product data matching the search query.
- **isLoading** (boolean) - True if the data is currently being fetched.
- **error** (Error | null) - An error object if the fetch failed, otherwise null.
- **isError** (boolean) - True if the fetch resulted in an error.

### Request Example
```javascript
const { data, isLoading } = useSearchProducts({ query: 'shirt', limit: 20 });
```

### Response Example (Success)
```json
{
  "data": [
    {
      "id": "prod_xyz",
      "name": "Blue T-Shirt",
      "description": "A comfortable blue t-shirt."
    },
    {
      "id": "prod_uvw",
      "name": "Graphic T-Shirt",
      "description": "T-shirt with a cool graphic."
    }
  ],
  "isLoading": false,
  "error": null,
  "isError": false
}
```
```

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

### useSearchProducts Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=code

Searches for products based on a query string and other optional parameters.

```APIDOC
## useSearchProducts(options?)

### Description
Search for products using a query string.

### Method
useSearchProducts

### Parameters
#### Query Parameters
- **options** (object) - Optional configuration for the search.
  - **query** (string) - Required - The search query string.
  - **limit** (number) - Optional - The maximum number of results to return.
  - **inStock** (boolean) - Optional - Filter to return only in-stock products.
  - **fmt** (string) - Optional - Specify the response format (e.g., 'google').
  - **currency** (string) - Optional - Currency code for pricing.
  - **country** (string) - Optional - Country code for contextual pricing.
  - **language** (string) - Optional - Language code for localization.
  - **enabled** (boolean) - Optional - Enable or disable query execution.

### Returns
An object containing:
- **data** (array | null) - An array of product objects matching the search query, or null.
- **isLoading** (boolean) - True if the search is currently in progress.

### Request Example
```jsx
import { useSearchProducts } from '@makerinc/react-sdk';

function SearchResults({ searchTerm }) {
  const { data, isLoading } = useSearchProducts({
    query: searchTerm,
    limit: 20,
  });

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

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

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

### useCategories Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/index

Fetches a list of available product categories. Supports limiting the number of categories returned.

```APIDOC
## useCategories(options?)

### Description

Fetches a list of all available product categories. This is useful for populating navigation menus or category filters.

### Method

`useCategories` (React Hook)

### Parameters

#### Query Parameters (options)

- **limit** (number) - Optional - The maximum number of categories to return. Defaults to a sensible value.
- **enabled** (boolean) - Optional - If true, the query will execute. If false, it will be skipped.

### Returns

An object containing:
- **data**: An array of category objects, or null if not yet fetched.
- **isLoading**: Boolean indicating if the category list is currently being fetched.

### Usage Example

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

function CategoryMenu() {
  const { data, isLoading } = useCategories({ limit: 10 });

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

  return (
    <nav>
      {data?.map((category) => (
        <a key={category.id} href={`/category/${category.id}`}>
          {category.name}
        </a>
      ))}
    </nav>
  );
}
```
```

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

### useProducts Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/index

Fetches multiple products by a list of IDs (up to 100). Supports various filtering and localization options.

```APIDOC
## useProducts(options)

### Description

Fetches a list of products based on provided product IDs. This hook is efficient for retrieving multiple products in a single request, with a limit of 100 products.

### Method

`useProducts` (React Hook)

### Parameters

#### Query Parameters (options)

- **productIds** (string | string[]) - Required - A single product ID or an array of product IDs to fetch.
- **inStock** (boolean) - Optional - If true, only return products that are currently in stock.
- **fmt** (string) - Optional - Specifies the output format. Currently supports 'google' for Google Product Feed format.
- **currency** (string) - Optional - The currency code (e.g., 'USD') to use for pricing information.
- **country** (string) - Optional - The country code (e.g., 'US') for contextual pricing and availability.
- **language** (string) - Optional - The language code (e.g., 'en') for localized product information.
- **enabled** (boolean) - Optional - If true, the query will execute. If false, it will be skipped.

### Returns

An object containing:
- **data**: An array of product data objects, or null if not yet fetched.
- **isLoading**: Boolean indicating if the data is currently being fetched.

### Usage Example

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

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

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

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

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

### useSearchProducts Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/index

Provides functionality to search for products based on a query string. Supports limiting the number of results.

```APIDOC
## useSearchProducts(options?)

### Description

Searches for products based on a given query string. Useful for implementing search functionality within your application.

### Method

`useSearchProducts` (React Hook)

### Parameters

#### Query Parameters (options)

- **query** (string) - Required - The search term to look for.
- **limit** (number) - Optional - The maximum number of search results to return. Defaults to a sensible value if not provided.
- **enabled** (boolean) - Optional - If true, the query will execute. If false, it will be skipped.

### Returns

An object containing:
- **data**: An array of product data objects matching the search query, or null if not yet fetched.
- **isLoading**: Boolean indicating if the search results are currently being fetched.

### Usage Example

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

function SearchComponent() {
  const { data, isLoading } = useSearchProducts({
    query: 'T-shirt',
    limit: 10,
  });

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

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

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

### useProduct Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=code

Fetches a single product by its unique identifier. Allows for filtering and localization.

```APIDOC
## useProduct(productId, options?)

### Description
Fetch a single product by ID.

### Method
useProduct

### Parameters
#### Path Parameters
- **productId** (string) - Required - Product ID to fetch.

#### Query Parameters
- **options** (object) - Optional configuration for the fetch.
  - **inStock** (boolean) - Optional - Only return if the product is in stock.
  - **fmt** (string) - Optional - Return product data in a specific format (e.g., 'google').
  - **currency** (string) - Optional - Currency code for pricing (e.g., 'USD').
  - **country** (string) - Optional - Country code for contextual pricing (e.g., 'US').
  - **language** (string) - Optional - Language code for localization (e.g., 'en-US').
  - **enabled** (boolean) - Optional - Enable or disable query execution.

### Returns
An object containing:
- **product** (object | null) - The fetched product data, or null if not found.
- **isLoading** (boolean) - True if the data is currently being fetched.
- **error** (object | null) - An error object if the fetch failed, otherwise null.
- **isError** (boolean) - True if the fetch resulted in an error.

### Request Example
```jsx
import { useProduct } from '@makerinc/react-sdk';

function ProductDetail({ productId }) {
  const { product, isLoading, error } = useProduct(productId, {
    inStock: true,
    country: 'US',
  });

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

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

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

### useMarkets Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/index

Fetches available markets for user selection. The hook returns either currencies or countries, depending on the store's configuration, enabling dynamic market selection.

```APIDOC
## `useMarkets()`

### Description
Fetch available markets for user selection. Returns currencies OR countries based on store configuration.

### Method
N/A (This is a React Hook, not an HTTP method)

### Endpoint
N/A (This is a React Hook, not an API endpoint)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
function MarketPicker() {
  const { data } = useMarkets();

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

  return null;
}
```

### Response
#### Success Response
- **data** (object) - An object containing market choices. The structure may include:
  - **choices** (array) - An array where the first element might be 'Currencies' or 'Countries', followed by detailed options.
    - **suggestedCurrency** (string) - The default or suggested currency.
    - **availableCurrencies** (array of strings) - A list of available currencies.
    - (Similar structure for countries if applicable)

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

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

### useProduct Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependents

Fetches a single product by its ID. Supports filtering by stock status and specifying output format, currency, country, language, and query execution.

```APIDOC
## useProduct(productId, options?)

### Description
Fetch a single product by ID. Allows for filtering and specifying response details.

### Method
`useProduct`

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

#### Query Parameters
N/A

#### Request Body
N/A

#### Hook Parameters
- **productId** (string) - Required - The ID of the product to fetch.
- **options** (object) - Optional - Configuration options:
  - **inStock** (boolean) - If true, only return products that are in stock.
  - **fmt** ('google') - Specifies the output format, e.g., 'google' for Google Product Feed.
  - **currency** (string) - The currency code for pricing (e.g., 'USD').
  - **country** (string) - The country code for contextual pricing (e.g., 'US').
  - **language** (string) - The language code for localization (e.g., 'en-US').
  - **enabled** (boolean) - If true, enables the query execution; otherwise, it's disabled.

### Returns
An object containing:
- **product** (object | null) - The product data if found, otherwise null.
- **isLoading** (boolean) - True if the data is currently being fetched.
- **error** (Error | null) - An error object if the fetch failed, otherwise null.
- **isError** (boolean) - True if the fetch resulted in an error.

### Request Example
```javascript
const { product, isLoading, error } = useProduct(productId, {
  inStock: true,
  country: 'US',
});
```

### Response Example (Success)
```json
{
  "product": {
    "id": "prod_123",
    "name": "Example Product",
    "description": "This is a sample product.",
    "price": {
      "amount": 19.99,
      "currency": "USD"
    }
  },
  "isLoading": false,
  "error": null,
  "isError": false
}
```
```

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

### useProducts Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependents

Fetches multiple products by their IDs (up to 100). Supports various filtering and formatting options.

```APIDOC
## useProducts(options)

### Description
Fetch multiple products by their IDs. Supports filtering and specifying response details.

### Method
`useProducts`

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

#### Query Parameters
N/A

#### Request Body
N/A

#### Hook Parameters
- **options** (object) - Required - Configuration options:
  - **productIds** (string | string[]) - Required - The ID(s) of the products to fetch (max 100).
  - **inStock** (boolean) - If true, only return products that are in stock.
  - **fmt** ('google') - Specifies the output format, e.g., 'google' for Google Product Feed.
  - **currency** (string) - The currency code for pricing (e.g., 'USD').
  - **country** (string) - The country code for contextual pricing (e.g., 'US').
  - **language** (string) - The language code for localization (e.g., 'en-US').
  - **enabled** (boolean) - If true, enables the query execution; otherwise, it's disabled.

### Returns
An object containing:
- **data** (Array<object> | null) - An array of product data if found, otherwise null.
- **isLoading** (boolean) - True if the data is currently being fetched.
- **error** (Error | null) - An error object if the fetch failed, otherwise null.
- **isError** (boolean) - True if the fetch resulted in an error.

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

### Response Example (Success)
```json
{
  "data": [
    {
      "id": "prod_123",
      "name": "Product A",
      "price": {"amount": 10.00, "currency": "USD"}
    },
    {
      "id": "prod_456",
      "name": "Product B",
      "price": {"amount": 20.00, "currency": "USD"}
    }
  ],
  "isLoading": false,
  "error": null,
  "isError": false
}
```
```

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

### useCategories Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependents

Fetches a list of available categories, with an option to limit the number of results returned.

```APIDOC
## useCategories(options?)

### Description
Fetch a list of available categories from the store.

### Method
`useCategories`

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

#### Query Parameters
N/A

#### Request Body
N/A

#### Hook Parameters
- **options** (object) - Optional - Configuration options:
  - **limit** (number) - Optional - The maximum number of categories to return.
  - **enabled** (boolean) - Optional - If true, enables the query execution; otherwise, it's disabled.

### Returns
An object containing:
- **data** (Array<object> | null) - An array of category objects.
- **isLoading** (boolean) - True if the data is currently being fetched.
- **error** (Error | null) - An error object if the fetch failed, otherwise null.
- **isError** (boolean) - True if the fetch resulted in an error.

### Request Example
```javascript
const { data, isLoading } = useCategories({ limit: 10 });
```

### Response Example (Success)
```json
{
  "data": [
    {
      "id": "cat_1",
      "name": "Apparel",
      "description": "Clothing items."
    },
    {
      "id": "cat_2",
      "name": "Electronics",
      "description": "Gadgets and devices."
    }
  ],
  "isLoading": false,
  "error": null,
  "isError": false
}
```
```

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

### useProductsByCategory Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=code

Fetches products within a specific category, supporting filtering, sorting, and pagination for building product listing pages and carousels.

```APIDOC
## useProductsByCategory(options)

### Description
Fetch products from a category with filtering, sorting, and pagination. This hook can be used to build both full Product Listing Pages (PLPs) and individual category sliders/carousels.

### Method
useProductsByCategory

### Parameters
#### Request Body
- **options** (object) - Required - Configuration for fetching products by category.
  - **categoryId** (string) - Required - Category identifier.
  - **limit** (number) - Optional - Number of results per page (default: 20).
  - **sort** (SortOrder) - Optional - The order in which to sort the results.
  - **inStock** (boolean) - Optional - Filter to return only in-stock products.
  - **facets** (string[]) - Optional - Facet filters (e.g., `['color=Blue', 'size=Large']`).
  - **createdWithin** (string) - Optional - Filter products created within a specific date range (e.g., '7d', '30d').
  - **minPrice** (number) - Optional - Minimum price filter.
  - **maxPrice** (number) - Optional - Maximum price filter.
  - **currency** (string) - Optional - Currency code for pricing.
  - **country** (string) - Optional - Country code for contextual pricing.
  - **language** (string) - Optional - Language code for localization.
  - **enabled** (boolean) - Optional - Enable or disable query execution.

### Returns
An object containing:
- **data** (object | null) - Data object containing products and other category info.
- **error** (object | null) - An error object if the fetch failed.
- **isLoading** (boolean) - True if the initial data is being fetched.
- **isFetchingMore** (boolean) - True if more data is being fetched.
- **isError** (boolean) - True if the fetch resulted in an error.
- **loadMore** (function) - Function to trigger fetching the next page of results.
- **hasMore** (boolean) - True if there are more results to load.

### Request Example
```jsx
import { useProductsByCategory } from '@makerinc/react-sdk';

function CategoryPage({ categoryId }) {
  const { data, isLoading, loadMore, hasMore, isFetchingMore } = useProductsByCategory({
    categoryId,
    limit: 24,
  });

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

  return (
    <div>
      {data?.products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
      {hasMore && (
        <button onClick={loadMore} disabled={isFetchingMore}>
          {isFetchingMore ? 'Loading...' : 'Load More'}
        </button>
      )}
    </div>
  );
}
```
```

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

### MakerProvider Component

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependents

The MakerProvider component is used to wrap your application, providing the necessary context for other hooks to access store data. It requires an `accountId`.

```APIDOC
## MakerProvider

### Description
Wraps your application with the Maker context, enabling the use of SDK hooks. Requires an `accountId`.

### Component
`<MakerProvider accountId="your-account-id"> {children} </MakerProvider>`

### Props
- **accountId** (string) - Required - Your Maker account identifier.
```

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

### useProduct Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/index

Fetches a single product's details using its unique identifier. Supports filtering by stock status, currency, country, and language.

```APIDOC
## useProduct(productId, options?)

### Description

Fetches a single product by its ID. Allows for optional parameters to filter and format the returned product data.

### Method

`useProduct` (React Hook)

### Parameters

#### Path Parameters

- **productId** (string) - Required - The unique identifier of the product to fetch.

#### Query Parameters (options)

- **inStock** (boolean) - Optional - If true, only return the product if it is currently in stock.
- **fmt** (string) - Optional - Specifies the output format. Currently supports 'google' for Google Product Feed format.
- **currency** (string) - Optional - The currency code (e.g., 'USD') to use for pricing information.
- **country** (string) - Optional - The country code (e.g., 'US') for contextual pricing and availability.
- **language** (string) - Optional - The language code (e.g., 'en') for localized product information.
- **enabled** (boolean) - Optional - If true, the query will execute. If false, it will be skipped.

### Returns

An object containing:
- **product**: The fetched product data (object or null).
- **isLoading**: Boolean indicating if the data is currently being fetched.
- **error**: An error object if the fetch failed, otherwise null.
- **isError**: Boolean indicating if an error occurred during fetching.

### Usage Example

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

function ProductDetail({ productId }) {
  const { product, isLoading, error } = useProduct(productId, {
    inStock: true,
    country: 'US',
  });

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

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

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

### useProductsByFacet Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=versions

Fetches products based on a specified facet. This hook is useful for filtering product listings.

```APIDOC
## `useProductsByFacet(options)`

### Description
Fetches products by facet.

### Method
Not Applicable (Hook)

### Endpoint
Not Applicable (Hook)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const { data, isLoading } = useProductsByFacet({ facet: 'Women_Accessories' });
```

### Response
#### Success Response (200)
- **data** (object) - Contains the fetched product data.
- **isLoading** (boolean) - Indicates if the data is currently being loaded.

#### Response Example
```json
{
  "data": { ... },
  "isLoading": false
}
```
```

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

### Fetch Related Products using useRelatedProducts Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

Illustrates the usage of the `useRelatedProducts` hook to find products related to a specific product ID. It displays how to fetch related product data and monitor the loading status.

```javascript
const { data, isLoading } = useRelatedProducts({ productId: '123' });
```

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

### useProductsByCategory Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependents

Fetches products from a specific category with options for filtering, sorting, pagination, and more. Ideal for Product Listing Pages (PLPs).

```APIDOC
## useProductsByCategory(options)

### Description
Fetch products from a category with filtering, sorting, and pagination. Useful for Product Listing Pages (PLPs) and category carousels.

### Method
`useProductsByCategory`

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

#### Query Parameters
N/A

#### Request Body
N/A

#### Hook Parameters
- **options** (object) - Required - Configuration options:
  - **categoryId** (string) - Required - The identifier of the category.
  - **limit** (number) - Optional - The number of results per page (default: 20).
  - **sort** (SortOrder) - Optional - The order in which to sort the results.
  - **inStock** (boolean) - Optional - Filter to include only products that are in stock.
  - **facets** (string[]) - Optional - An array of facet filters (e.g., `['color=Blue', 'size=Large']`).
  - **createdWithin** (string) - Optional - A date range for filtering products created within a specific period (e.g., '7d', '30d').
  - **minPrice** (number) - Optional - Minimum price filter.
  - **maxPrice** (number) - Optional - Maximum price filter.
  - **currency** (string) - Optional - The currency code for pricing (e.g., 'USD').
  - **country** (string) - Optional - The country code for contextual pricing (e.g., 'US').
  - **language** (string) - Optional - The language code for localization (e.g., 'en-US').
  - **enabled** (boolean) - Optional - If true, enables the query execution; otherwise, it's disabled.

### Returns
An object containing:
- **data** (object | null) - An object containing product data, typically with a `products` array.
- **error** (Error | null) - An error object if the fetch failed, otherwise null.
- **isLoading** (boolean) - True if the initial data is currently being fetched.
- **isFetchingMore** (boolean) - True if more data is being fetched.
- **isError** (boolean) - True if the fetch resulted in an error.
- **loadMore** (function) - A function to load the next page of results.
- **hasMore** (boolean) - True if there are more results to load.

### Request Example
```javascript
const { data, isLoading, loadMore, hasMore, isFetchingMore } = useProductsByCategory({
  categoryId,
  limit: 24,
});
```

### Response Example (Success)
```json
{
  "data": {
    "products": [
      {
        "id": "prod_abc",
        "name": "Category Product 1",
        "price": {"amount": 25.50, "currency": "USD"}
      },
      {
        "id": "prod_def",
        "name": "Category Product 2",
        "price": {"amount": 30.00, "currency": "USD"}
      }
    ],
    "total": 100
  },
  "isLoading": false,
  "isFetchingMore": false,
  "isError": false,
  "hasMore": true
}
```
```

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

### useRelatedProducts Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=code

Fetches products that are related to a given product.

```APIDOC
## useRelatedProducts(options)

### Description
Fetch products that are related to a specific product.

### Method
useRelatedProducts

### Parameters
#### Request Body
- **options** (object) - Required - Configuration for fetching related products.
  - **productId** (string) - Required - The ID of the product for which to find related items.
  - **limit** (number) - Optional - The maximum number of related products to return.
  - **inStock** (boolean) - Optional - Filter to return only in-stock related products.
  - **fmt** (string) - Optional - Specify the response format (e.g., 'google').
  - **currency** (string) - Optional - Currency code for pricing.
  - **country** (string) - Optional - Country code for contextual pricing.
  - **language** (string) - Optional - Language code for localization.
  - **enabled** (boolean) - Optional - Enable or disable query execution.

### Returns
An object containing:
- **data** (array | null) - An array of related product objects, or null.
- **isLoading** (boolean) - True if the related products are currently being fetched.

### Request Example
```jsx
import { useRelatedProducts } from '@makerinc/react-sdk';

function ProductRecommendations({ productId }) {
  const { data, isLoading } = useRelatedProducts({ productId: productId, limit: 5 });

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

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

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

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

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=dependencies

The `useMarkets` hook retrieves available markets, which can be currencies or countries depending on store configuration. The `MarketPicker` component demonstrates how to use this hook to render a select dropdown for currency selection if the store is configured for currencies. It depends on the React SDK.

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

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

  return null;
}
```

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

### useCategoriesByProduct Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/package/%40makerinc/react-sdk_activetab=code

Retrieves the categories associated with a specific product.

```APIDOC
## useCategoriesByProduct(options)

### Description
Get the categories to which a specific product belongs.

### Method
useCategoriesByProduct

### Parameters
#### Request Body
- **options** (object) - Required - Configuration for fetching categories by product.
  - **productId** (string) - Required - The ID of the product.
  - **limit** (number) - Optional - The maximum number of categories to return.
  - **enabled** (boolean) - Optional - Enable or disable query execution.

### Returns
An object containing:
- **data** (array | null) - An array of category objects associated with the product, or null.
- **isLoading** (boolean) - True if the categories are currently being fetched.

### Request Example
```jsx
import { useCategoriesByProduct } from '@makerinc/react-sdk';

function ProductCategories({ productId }) {
  const { data, isLoading } = useCategoriesByProduct({ productId: 'prod_abc' });

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

  return (
    <div>
      Associated Categories:
      {data?.map((category) => (
        <span key={category.id}>{category.name} </span>
      ))}
    </div>
  );
}
```
```

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

### useProductsByFacet Hook

Source: https://www.npmjs.com/package/@makerinc/react-sdk/index

Fetches products based on a specified facet. This hook is useful for filtering and displaying products according to predefined categories or attributes.

```APIDOC
## `useProductsByFacet(options)`

### Description
Fetch products by facet. This hook allows you to retrieve a list of products that match a specific facet.

### Method
N/A (This is a React Hook, not an HTTP method)

### Endpoint
N/A (This is a React Hook, not an API endpoint)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **options** (object) - Required - An object containing configuration options for the hook.
  - **facet** (string) - Required - The facet to filter products by (e.g., 'Women_Accessories').

### Request Example
```javascript
const { data, isLoading } = useProductsByFacet({ facet: 'Women_Accessories' });
```

### Response
#### Success Response
- **data** (object) - The fetched product data.
- **isLoading** (boolean) - Indicates if the data is currently being loaded.

#### Response Example
(Response structure depends on the specific data returned for products matching the facet)
```
Tokens:
Raw