hydrogen/packages/hydrogen/src/components/ProductMetafield/README.md

The ProductMetafield component renders a Metafield component with the product metafield. It must be a descendent of a ProductProvider component.

Example code

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

export function Product({product}) {
  return (
    <ProductProvider product={product}>
      <ProductMetafield namespace="my_fields" keyName="manufacture_date" />
    </ProductProvider>
  );
}

export function ProductWithRenderProp({product}) {
  return (
    <ProductProvider product={product}>
      <ProductMetafield namespace="my_fields" keyName="manufacture_date">
        {({value}) => {
          return (
            <p>This product was manufactured on {value.toLocaleDateString()}</p>
          );
        }}
      </ProductMetafield>
    </ProductProvider>
  );
}

Props

Name	Type	Description
keyName	string	A string corresponding to the key of the product's metafield.
namespace	string	A string corresponding to the namespace of the product's metafield.
children?	ReactNode	A render function that takes a Metafield object as its argument.

Component type

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

Related components

• Metafield