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.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.
Installation
npx merchify-cli init
This CLI will guide you through setting up Merchify components in your project