Product View
Basic Setup & Configuration
1. How do I import and use the ProductView components?
You can import the different product view components from @unbxd-ui/react-search-components
like ProductViewButtons
, ProductViewDropdown
, ProductViewRadioButtons
.
import { UnbxdSearchCSRWrapper } from "@unbxd-ui/react-search-components";
import { ProductViewButtons, ProductViewDropdown, ProductViewRadioButtons } from "@unbxd-ui/react-search-components";
<UnbxdSearchCSRWrapper>
<ProductViewButtons />
<ProductViewDropdown />
<ProductViewRadioButtons />
</UnbxdSearchCSRWrapper>;
The ProductView components are designed to be used within the UnbxdSearchCSRWrapper
or UnbxdSearchSSRWrapper
components.
2. What are the different types of ProductView components available?
There are three main ProductView component types, each offering the same view switching functionality with different user interfaces:
- ProductViewButtons - View options displayed as clickable buttons (grid/list toggle)
- ProductViewDropdown - View options presented in a dropdown menu for compact display
- ProductViewRadioButtons - View options shown as radio button selections
3. What are the default view options and how do I customize them?
The default options are typically [{ value: "grid", label: "Grid" }, { value: "list", label: "List" }]
. You can customize by passing a custom options
array prop:
const customOptions = [
{ value: "grid", label: "Grid View" },
{ value: "list", label: "List View" },
{ value: "compact", label: "Compact View" },
];
<ProductViewButtons options={customOptions} />;
4. How can I add labels to ProductView components?
Use the showLabel
and label
props to add descriptive text:
<ProductViewButtons showLabel={true} label="View as:" options={viewOptions} />
The label will appear before the view controls and can be styled using the label
CSS class.
View Behavior & Selection
1. When do Product view components appear or hide?
All ProductView components automatically hide when numberOfProducts
is 0 (no search results). They only appear when there are products to display, preventing unnecessary UI elements when no results are available.
2. Can we have multiple instances of ProductView components?
Yes, you can have multiple ProductView components on the same page. All instances will share the same view state through the useProductView
hook, so they will stay synchronized. When a user selects a different view using any ProductView component, all instances will update to reflect the current selection.
Customization & Styling
1. Does the React Search SDK provide default CSS for the Product View components?
Yes, the React Search SDK provides built-in CSS for the ProductView components. To use the default styles, import the CSS file in your application:
// Import the built-in CSS
import "@unbxd-ui/react-search-components/styles/productView.css";
The built-in CSS includes default styles for all ProductView elements including buttons, dropdowns, radio buttons, labels, and selected states. You can then override specific classes through the styles
prop or add additional CSS rules to customize the appearance further.
2. Can I customize the appearance of ProductView components?
Yes, use the styles
prop to override CSS classes. Each component has its specific style properties.
Advanced Features
1. Can I customize individual view options in ProductViewDropdown?
Yes, you can customize both the dropdown activator and individual options:
const CustomActivator = ({ selected, styles }) => (
<div className="custom-activator">
<span>View: {selected?.label || "Select"}</span>
<span className="dropdown-arrow">ā¼</span>
</div>
);
const CustomOption = ({ item }) => (
<div className="custom-option">
<span className="view-icon">šļø</span>
{item.label}
</div>
);
<ProductViewDropdown ActivatorComponent={CustomActivator} CustomComponent={CustomOption} options={viewOptions} />;