DocsDocsSDKs

QuickView

React SDK guidance for QuickView.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use QuickView on product listing pages when visitors should be able to preview a product's key details and add it to the cart without navigating away from the grid. It keeps browsing momentum high by showing imagery, pricing, and an action slot in a side panel or modal.

If the visitor needs the full product experience (all variants, reviews, specifications), link to the PDP instead.

Composition notes

QuickView is a controlled overlay with a product data prop and a children action slot:

  • open and onOpenChange manage the panel visibility.
  • product takes a QuickViewProduct object with title, price (ReactNode), description, images, and optional href (link to full PDP).
  • children is the action slot rendered below the product details. Pass add-to-cart buttons, variant selectors, or save/wishlist controls.
  • mode (where supported) switches between sheet (default) and modal presentation.
  • useOverlayController is the recommended helper when a listing trigger needs to keep the selected payload and the open state together.

Price is a ReactNode

The price field accepts a ReactNode, not a string. This lets you render sale prices, currency formatting, and styled price components directly.

Behavior and theming guidance

The default sheet mode slides in from the right and preserves the visitor's scroll position on the listing page. The modal mode centers the preview and dims the background, which creates more focus but interrupts browsing flow.

The product image gallery is rendered from the images array. If the product has an href, the title becomes a link to the full PDP for visitors who want more details.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/storefront.
  • Playground route: /sandbox?component=QuickView.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

QuickView

# QuickView > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/storefront`. - Live playground: [/components/commerce/quick-view](https://sdk.enad.io/components/commerce/quick-view). ## When to use it Use `QuickView` on product listing pages when visitors should be able to preview a product's key details and add it to the cart without navigating away from the grid. It keeps browsing momentum high by showing imagery, pricing, and an action slot in a side panel or modal. If the visitor needs the full product experience (all variants, reviews, specifications), link to the PDP instead. ## Composition notes QuickView is a controlled overlay with a product data prop and a children action slot: - **`open`** and **`onOpenChange`** manage the panel visibility. - **`product`** takes a `QuickViewProduct` object with `title`, `price` (ReactNode), `description`, `images`, and optional `href` (link to full PDP). - **`children`** is the action slot rendered below the product details. Pass add-to-cart buttons, variant selectors, or save/wishlist controls. - **`mode`** (where supported) switches between sheet (default) and modal presentation. - **`useOverlayController`** is the recommended helper when a listing trigger needs to keep the selected payload and the open state together. > **Price is a ReactNode** > > The `price` field accepts a ReactNode, not a string. This lets you render sale prices, currency > formatting, and styled price components directly. ## Behavior and theming guidance The default sheet mode slides in from the right and preserves the visitor's scroll position on the listing page. The modal mode centers the preview and dims the background, which creates more focus but interrupts browsing flow. The product image gallery is rendered from the `images` array. If the product has an `href`, the title becomes a link to the full PDP for visitors who want more details. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/storefront`. - Playground route: /sandbox?component=QuickView. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes