Framework-Specific Examples

Learn how to use the SDK with different frameworks and platforms.

Sitecore JSS

In Sitecore JSS, the Bynder field value is directly accessible from fields:

import { BynderDamImage } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
 
const HeroBlock = ({ fields }) => (
  <BynderDamImage
    asset={fields.heroImage.value}
    derivative="webImage"
    alt={fields.altText.value}
    loading="lazy"
  />
);

Key Points

No JSON parsing needed - field value is already an object
Access via fields.fieldName.value
Works with all SDK components
Compatible with JSS rendering engines

Sitecore Content SDK

In Content SDK, the Bynder field is stored as a JSON string - parse it with JSON.parse():

import { BynderDamImage } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
import { Text, Field, withDatasourceCheck } from '@sitecore-content-sdk/nextjs';
import type { BynderAssetResponse } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
 
type HeroBlockProps = {
  fields: {
    heading: Field<string>;
    heroImage: Field<string>; // JSON string
  };
};
 
const HeroBlock = ({ fields }: HeroBlockProps) => {
  const asset: BynderAssetResponse | null = 
    fields.heroImage?.value ? JSON.parse(fields.heroImage.value) : null;
 
  return (
    <>
      <Text tag="h1" field={fields.heading} />
      <BynderDamImage
        asset={asset}
        derivative="webImage"
        alt="Hero image"
      />
    </>
  );
};
 
export default withDatasourceCheck()<HeroBlockProps>(HeroBlock);

Key Points

Field value is a JSON string - must parse it
Type the field as Field<string>
Parse with JSON.parse(fields.fieldName.value)
Handle null/undefined with optional chaining
Full TypeScript support with BynderAssetResponse type

React / Vite / CRA

Standard React usage with state or props from API calls:

import { BynderDamImage } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
import { useState, useEffect } from 'react';
 
function ProductGallery() {
  const [asset, setAsset] = useState(null);
  
  useEffect(() => {
    fetch('/api/bynder-asset')
      .then(res => res.json())
      .then(setAsset);
  }, []);
  
  return asset ? (
    <BynderDamImage
      asset={asset}
      derivative="webImage"
      alt="Product image"
      loading="lazy"
    />
  ) : null;
}

Key Points

Works in any React environment
No framework-specific dependencies
Use with state management (Redux, Zustand, etc.)
Compatible with all React rendering patterns

Next.js App Router

Use with Next.js 14+ App Router and Server Components:

import { BynderDamNextImage } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
 
async function getAssetData() {
  const res = await fetch('https://api.example.com/asset');
  return res.json();
}
 
export default async function ProductPage() {
  const asset = await getAssetData();
 
  return (
    <main>
      <BynderDamNextImage
        asset={asset}
        derivative="webImage"
        alt="Product"
        priority
      />
    </main>
  );
}

Key Points

Works in both Server and Client Components
Use BynderDamNextImage for image optimization
Server Components can fetch asset data directly
Client Components work with 'use client' directive

Next.js Pages Router

Use with Next.js Pages Router and getServerSideProps/getStaticProps:

import { BynderDamNextImage } from '@neworange/bynder-dam-connector-sitecoreai-sdk';
import type { GetServerSideProps } from 'next';
 
export default function ProductPage({ asset }) {
  return (
    <BynderDamNextImage
      asset={asset}
      derivative="webImage"
      alt="Product"
      width={800}
      height={600}
    />
  );
}
 
export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('https://api.example.com/asset');
  const asset = await res.json();
  
  return { props: { asset } };
};

Key Points

Compatible with getServerSideProps, getStaticProps, and getInitialProps
Pass asset data as props from server-side data fetching
Use BynderDamNextImage for Next.js optimization
Works with incremental static regeneration (ISR)

Component Examples Advanced Examples