useProductView

Overview

The useProductView hook is specifically designed to handle and streamline how products are displayed to users within an application. By managing various aspects of the product view, such as layout configurations, this hook ensures a consistent and optimized user experience. It abstracts the complexities involved in adjusting product displays, allowing developers to easily control how products are presented across different components or pages, enhancing both flexibility and usability.

Usage

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

⚠️

Note:

The useProductView hook must be used within the wrapper (in CSR, SSR and Custom Hooks approaches) to ensure that the respective component(s) and the search functionality work properly.

Code Example

import { useProductView } from "@unbxd-ui/react-search-hooks";
 
const ProductView = () => {
    const { view, setView } = useProductView()
 
    const handleViewClick = (value) => {
        setView(value)
    }
 
    return <div className="view-root">
        <label htmlFor="view-options" className="view-label">View As:</label>
        <div id="view-options" className="view-options">
            <button className={view === "grid" ? "selected-view": ""} onClick={() => { handleViewClick("grid") }}>Grid</button>
            <button className={view === "list" ? "selected-view": ""} onClick={() => { handleViewClick("list") }}>List</button>
        </div>
    </div>
}

Hook API

Return Values

view

function

The current value of how the products are being viewed.

setView

function

The function to change the product view value, which will be applied to the products wrapper element.

Use Cases

Product View As Dropdown

Product View As Buttons

Product View As Radio Buttons

usePageSize useSorting