hydrogen/packages/hydrogen/src/components/SelectedVariantImage/README.md
2021-11-09 18:20:09 -08:00

1.4 KiB

The SelectedVariantImage component renders an Image component for the product's selected variant's image. It must be a descendent of a ProductProvider component.

Example code

import {SelectedVariantImage, ProductProvider} from '@shopify/hydrogen';

export function ProductDetails({product}) {
  return (
    <ProductProvider value={product}>
      <SelectedVariantImage />
    </ProductProvider>
  );
}

Alias

The SelectedVariantImage component is aliased by the Product.SelectedVariant.Image component. You can use whichever component you prefer.

Component type

The SelectedVariantImage component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.