Component Examples

Learn how to use each SDK component with basic examples.

Working with Asset JSON

The selected asset data follows this structure.

For consistency across SitecoreAI, Content SDK, and legacy XP/XM field values (<asset><![CDATA[{"type":"Assets",...}]]></asset>), use parseBynderField() to normalize input.

{
  "id": "asset-id",
  "databaseId": "db-id",
  "name": "asset-name.jpg",
  "type": "IMAGE",
  "url": "https://bynder.example.com/m/asset-id/asset-name.jpg",
  "fileSize": 2048576,
  "tags": ["tag1", "tag2"],
  "files": {
    "webimage": {
      "url": "https://bynder.example.com/m/asset-id/asset-name-web.jpg"
    }
  }
}

BynderDamNextImage

Use the BynderDamNextImage component for automatic optimization in Next.js:

Note: BynderDamNextImage is now available from the dedicated /next subpath. Next.js is required for this component.

import { BynderDamNextImage } from '@neworange/bynder-dam-connector-sitecoreai-sdk/next';
import { parseBynderField } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
 
interface HeroProps {
  assetData: string; // JSON string from the field
}
 
export default function HeroImage({ assetData }: HeroProps) {
  if (!assetData) {
    return <div className="placeholder">No image selected</div>;
  }
 
  const asset = parseBynderField(assetData);
 
  return (
    <BynderDamNextImage
      asset={asset}
      width={1200}
      height={600}
      alt={asset.name}
      className="w-full h-auto"
      priority
    />
  );
}

Key Features

Uses Next.js Image component for automatic optimization
Requires Next.js 12.2.0 or higher
Supports all Next.js Image props (priority, fill, sizes, etc.)
Automatic lazy loading and responsive sizing

BynderDamImage

Use BynderDamImage for any React environment without Next.js:

import { BynderDamImage, parseBynderField } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
 
interface ProductImageProps {
  assetData: string;
}
 
export function ProductImage({ assetData }: ProductImageProps) {
  if (!assetData) {
    return null;
  }
 
  const asset = parseBynderField(assetData);
 
  return (
    <BynderDamImage
      asset={asset}
      alt={asset.name}
      className="product-image"
      loading="lazy"
    />
  );
}

Key Features

Framework-agnostic (works in any React environment)
Uses standard HTML <img> tag
Works with Next.js, Sitecore JSS, Sitecore Content SDK, CRA, Vite, etc.
No special dependencies required

BynderDamVideo

Render video assets with smart derivative selection:

import { BynderDamVideo, parseBynderField } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
 
interface VideoProps {
  assetData: string;
}
 
export function VideoPlayer({ assetData }: VideoProps) {
  if (!assetData) {
    return <div>No video selected</div>;
  }
 
  const asset = parseBynderField(assetData);
 
  return (
    <BynderDamVideo
      asset={asset}
      controls
      className="w-full max-w-2xl"
    />
  );
}

Key Features

Automatically renders multiple <source> elements for MP4 and WebM
Smart derivative selection with fallback
Supports all standard HTML5 video attributes
Browser automatically selects best supported format

BynderDamLink

Use BynderDamLink to create links to Bynder assets or download buttons:

import { BynderDamLink, parseBynderField } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
 
interface DownloadButtonProps {
  assetData: string;
}
 
export function DownloadButton({ assetData }: DownloadButtonProps) {
  if (!assetData) {
    return null;
  }
 
  const asset = parseBynderField(assetData);
 
  return (
    <BynderDamLink
      asset={asset}
      derivative="original"
      download
      className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700"
    >
      Download Original Image
    </BynderDamLink>
  );
}

Key Features

Create links to asset derivatives
Enable downloads with the download attribute
Open in new tab with target="_blank"
Supports custom download filenames
Fully styleable with className and standard link attributes

Overview Framework Examples