` with your custom element.
*
* Use this when you need a different element type or custom structure.
*
* Default: `false`
*/
asChild?: boolean;
/**
* Child components to render within the modifiers context.
*
* Use `Product.ModifierOptions` and `Product.ModifierOptionRepeater` to iterate
* over and display modifier options.
*/
children: React.ReactNode;
/**
* CSS class name applied to the default element.
*/
className?: string;
}
/**
* Container for product modifier system.
* Does not render when there are no modifiers.
*
* Use `Product.ModifierOptions` and `Product.ModifierOptionRepeater` to iterate
* over and display modifier options.
*
* @component
* @example Basic usage
* ```tsx
* // import { Product, Option, Choice } from '@wix/stores/components';
* //
* // Product.Modifiers must be wrapped in ProductList.ProductRepeater or Product.Root
*
* // Default styling
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* @example Custom rendering with `asChild`
* ```tsx
* // import { Product, ProductList } from '@wix/stores/components';
* //
* // Product.Modifiers must be wrapped in ProductList.ProductRepeater or Product.Root
*
* // asChild with React element - Syntax demonstration for alternative element type
*
*
*
*
* // asChild with render function - Syntax demonstration for accessing render props
*
* {React.forwardRef(({ hasModifiers, ...props }, ref) => (
*
* ))}
*
*
* // asChild with render object - Syntax demonstration for accessing render props
*
* {{
* render: ({ hasModifiers, ...props }, ref) => (
*
* )
* }}
*
* ```
*
* @example Custom iteration with `useModifiersContext()`
* ```tsx
* // import { Product, Option, Choice } from '@wix/stores/components';
* //
* // Product.Modifiers must be wrapped in ProductList.ProductRepeater or Product.Root
*
* // Custom component using the hook
* function CustomModifierRenderer() {
* const { hasModifiers, modifiers } = Product.useModifiersContext();
*
* if (!hasModifiers) return null;
*
* return modifiers.map(modifier => (
*
*
*
*
*
*
*
*
*
* ));
* }
*
* // Usage within the parent component
*
*
*
* ```
*/
export declare const Modifiers: React.ForwardRefExoticComponent
>;
/**
* Props for the `Product.ModifierOptions` component.
*/
export interface ModifierOptionsProps {
/**
* Child components to render when modifier options exist.
*
* Typically contains `Product.ModifierOptionRepeater` to iterate over modifiers.
*/
children: React.ReactNode;
/**
* Content to display when no modifier options are available.
*
* Only rendered when the product has no modifiers.
*/
emptyState?: React.ReactNode;
}
/**
* Component that provides access to modifier options.
*
* @component
* @example Basic usage
* ```tsx
* // import { Product, Option, Choice } from '@wix/stores/components';
* //
* // Product.ModifierOptions must be wrapped in Product.Modifiers
*
* // Default styling
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* @example With emptyState
* ```tsx
* // import { Product, Option } from '@wix/stores/components';
* //
* // Product.ModifierOptions must be wrapped in Product.Modifiers
*
* // With emptyState
* No modifiers available