useProductView Hook

Basic Setup & Configuration

1. How do I import the useProductView hook?

You can import the useProductView hook from @unbxd-ui/react-search-hooks:

import { useProductView } from "@unbxd-ui/react-search-hooks";

2. How can I use view types?

The useProductView hook allows you to set different view types for product display by using the setView function. You can choose from common view types like grid, list, and table, or define custom view types. For example, view types can be used to switch between 2-grid, 3-grid, or 4-grid layouts..

3. How do I get the current view type?

The view property exported from the useProductView hook shows the current view type. Click here to view the view property documentation.

4. What is the default view type if none is set?

The useProductView hook uses a default view value (DEF_VIEW) when no view is configured:

const { view } = useProductView();
 
console.log(view); // Shows default value (typically "grid" or "list")
 
// The default is defined in the search configuration
// and can vary based on your setup

5. How does useProductView integrate with product display?

The useProductView hook manages view state that can be used to conditionally render different product layouts:

const { view, setView } = useProductView();
 
const renderProducts = () => {
	switch (view) {
		case "grid":
			return <ProductGrid products={products} />;
		case "list":
			return <ProductList products={products} />;
		case "table":
			return <ProductTable products={products} />;
		default:
			return <ProductGrid products={products} />;
	}
};

Events

1. What events does useProductView dispatch?

The useProductView hook dispatches a "PRODUCT_VIEW_CLICKED" event when the view type changes:

// When setView is called, it dispatches:
// { type: PRODUCT_VIEW_CLICKED, message: "Product view clicked", value: viewType }
 
setView("list"); // Dispatches PRODUCT_VIEW_CLICKED event with value "list"
setView("grid"); // Dispatches PRODUCT_VIEW_CLICKED event with value "grid"

This event is useful for analytics, tracking user preferences, and custom view change handling.

2. How does useProductView handle errors?

From the SDK's perspective, when an error occurs, an ON_EVENT is triggered with the type "ERROR". Users can implement custom error handling logic within the onEvent function.