React library
Installation
Install the DeGallery React library and its typed client dependency.
The React library is a client-side UI package. Install it with the framework-neutral SDK and the peer dependencies required by your application.
Install the packages
pnpm add @degallery/react @degallery/sdk @tanstack/react-querynpm install @degallery/react @degallery/sdk @tanstack/react-queryIf your app already has TanStack Query, keep its existing version and pass its QueryClient to GalleryProvider when you need shared cache ownership.
Add a provider boundary
The provider must render inside a client component. Use a public key or server-issued read token for browser requests.
'use client';
import { GalleryProvider } from '@degallery/react';
export function Providers({ children }: { children: React.ReactNode }) {
return (
<GalleryProvider
apiUrl="https://api.degallery.mpotulo.com"
publishableKey={process.env.NEXT_PUBLIC_DEGALLERY_KEY}
>
{children}
</GalleryProvider>
);
}Render your first gallery
import { Gallery } from '@degallery/react';
export function ProductGallery({ galleryId }: { galleryId: string }) {
return <Gallery galleryId={galleryId} layout="Masonry" />;
}Keep secrets on the server
The React package is client-side UI code. Keep secret credentials, uploads, private capability issuance, and organization authorization outside the component tree.