How-to

Render a public gallery

Load a public gallery and render it with the React library.

Use a publishable key or public read capability for browser-loaded galleries.

'use client';

import { Gallery, GalleryProvider } from '@degallery/react';

export function PublicGallery({ galleryId }: { galleryId: string }) {
  return (
    <GalleryProvider
      apiUrl="https://api.degallery.mpotulo.com"
      publishableKey={process.env.NEXT_PUBLIC_DEGALLERY_KEY}
    >
      <Gallery galleryId={galleryId} layout="Masonry" />
    </GalleryProvider>
  );
}

For server-rendered pages, fetch the gallery with @degallery/sdk and pass the serializable gallery result to Gallery. That avoids an extra browser metadata request.