UseProductFieldContext hook

const productFieldContext = useProductFieldContext(fieldName);

This hook can be used in content element on product details page. Content elements can access and update custom product field values for the product displayed on the page.

The useProductFieldContext hook provides an API for changing product field values for content elements. This hook returns an object with API for changing the field value or null if it's not being used on the product details page or the field with the specified name is not available.

Parameters

Parameter	Type	Description
fieldName	string	The name of the product field.

Return Value

The hook returns an object with the following properties or null:

Property	Type	Description
onFieldChange	(value: unknown, isValid: boolean) => void	Function which is invoked to update the field value. value is the new value of the field. isValid is the validity status of the field.

Example:

const productFieldContext = useProductFieldContext('StringField');

if (!productFieldContext)
  return null;

const { onFieldChange } = productFieldContext;

const handleFieldChange = (newValue: string, isValid: boolean) => {
  onFieldChange(newValue, isValid);
};