Component Migration Using the SDK

// Legacy code often assumed one hard-coded format per field.
const raw = item?.fields?.BynderDamSingleFile?.value;
// custom XML parsing or brittle string handling...

import { parseBynderField, BynderDamImage } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
 
const rawValue = item?.fields?.BynderDamSingleFile?.value;
const parsed = parseBynderField(rawValue);
 
export function ProductImage() {
  if (!parsed) return null;
  return <BynderDamImage asset={parsed} alt="Product image" />;
}

import { parseBynderField, BynderDamImage } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
 
export function HeroImage({ item }: { item: any }) {
  const bynderRaw = item?.fields?.HeroImageBynder?.value;
  const bynderAsset = parseBynderField(bynderRaw);
  const sitecoreImage = item?.fields?.HeroImageSitecore?.value;
 
  if (bynderAsset) {
    return <BynderDamImage asset={bynderAsset} alt="Hero image" />;
  }
 
  if (sitecoreImage?.src) {
    return <img src={sitecoreImage.src} alt={sitecoreImage.alt || 'Hero image'} />;
  }
 
  return null;
}