useProduct Hook
React hook for accessing product data from the
Product context. Use this within a Product component to build custom displays and access selection state.This hook is an optional React convenience. Product data lives in the public catalog, which you can read in any language — see Product info.
Interactive Demo
Try the interactive playground below - the useProduct hook provides access to product data within a Product context:
Loading playground...
Return Values
productProductData | nullFull product data including name, description, price, and available options
variantProductVariant | undefinedCurrently selected product variant based on option selections
selectionRecord<string, string>Current option selections (e.g., { Size: 'M', Color: 'Blue' })
currentPricenumber | undefinedCurrent price in cents based on selected variant
combinationsCombination[]Available product combinations for stock validation
optionAttributesRecord<string, OptionAttribute>Metadata about each option (affectsCombinations, etc.)
setSelection(selection: Record<string, string>) => voidFunction to programmatically update option selections
Usage Note
The useProduct hook provides direct access to product data and selection state from the Product context. This is useful for building custom UI components that need to display or interact with product information.
The Product component handles all data fetching internally. Use the renderLoading and renderError props to customize loading and error states.
Advanced Usage
Build custom option selectors with stock validation and dynamic pricing using the full context values from useProduct.
code
Installation
npm install @snowcone-app/ui
Styling — your Tailwind v4 build compiles it. In your global stylesheet, add
@import '@snowcone-app/ui/styles/globals.css' (brings in Tailwind, the theme tokens, and an @source for the package) plus an @source for your own code. In Next.js, also add transpilePackages: ['@snowcone-app/ui']. Add className="dark" on an ancestor for dark mode.