WishlistDrawer
Slide-over wishlist surface for saved items and optional move-to-cart actions.
Best for
Import
import { WishlistDrawer } from "@enadhq/enad-react-sdk/client/wishlist"When to use it
Use WishlistDrawer when saved items should stay close to the browsing experience instead of living only on a dedicated route.
It works well for utility-nav access and save-for-later flows that often lead back into product exploration.
Composition notes
Like CartDrawer, this is a controlled overlay with isOpen and onClose. Add wishlistId when the surface should target a specific saved list and onMoveToCart when the flow supports quick transfer into the cart.
In the docs sandbox, the live preview uses seeded wishlist data so the drawer anatomy stays visible without auth or server-backed mutations. The code sample above still shows the real integration shape for app runtime usage.
Behavior and theming guidance
Keep the drawer focused on saved-item review and the next likely action. If the wishlist experience grows beyond a short side panel, move the richer management flow to a full page.
Examples
Live examples you can edit directly in the sandbox.
Wishlist drawer shell
Use the drawer from shell state and connect move-to-cart when the wishlist integration supports it.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean | — | Controls whether the wishlist sheet is open |
| onClose | () => void | — | Callback fired when the drawer should close, including overlay click and escape-key dismissal |
| wishlistId | string | — | Specific wishlist id to load through the wishlist hooks; omit it only when another runtime boundary owns the data fetching |
| onMoveToCart | string | — | Optional callback for a move-to-cart action, receiving the selected product id |
| className | string | — | Additional classes applied to the sheet container |
| labels | string | {} | Override strings for the title, empty state, remove action, and move-to-cart action |