JSS: General Link [DAM]

This is an example implementation. Adapt the component, helper usage, styling, fallback behavior, and rendering logic to fit your own JSS application.

Parse the XML-wrapped JSON field value and render the selected Bynder file URL as a plain anchor.

DamGeneralLink.tsx

import React from 'react';
import { Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { getFile, getSingleAsset } from '@/lib/bynder-xm-xp-headless';
 
type DamGeneralLinkProps = {
  fields: {
    link?: Field<string>;
  };
};
 
const DamGeneralLink = ({ fields }: DamGeneralLinkProps) => {
  const asset = getSingleAsset(fields.link);
  const link = getFile(asset);
 
  if (!link?.url) {
    return null;
  }
 
  return <a href={link.url}>{asset?.name || 'Open DAM asset'}</a>;
};
 
export default withDatasourceCheck()<DamGeneralLinkProps>(DamGeneralLink);

Video File