degallery-react

---
name: degallery-react
description: Add DeGallery galleries to React applications using @degallery/react, GalleryProvider, Gallery, Asset, or useGallery. Use when integrating DeGallery into React or Next.js UI.
---

# DeGallery React integration

`@degallery/react` provides React gallery components and hooks. It uses `@degallery/sdk` and TanStack Query. The package supports React 19; in frameworks such as Next.js, put the provider behind a client component boundary.

## Install

```bash
pnpm add @degallery/react @degallery/sdk @tanstack/react-query
```

## Configure the provider

```tsx
'use client';

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

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <GalleryProvider
      apiUrl="https://api.degallery.dev"
      publishableKey={process.env.NEXT_PUBLIC_DEGALLERY_KEY}
    >
      {children}
    </GalleryProvider>
  );
}
```

Only use a publishable key in browser code, and only for its permitted public content scope. Never pass a private API key or delivery-signing secret to `GalleryProvider`. For private content, resolve authorization on the server and provide a scoped, short-lived read token or a safe server-resolved payload.

## Render a gallery

Render a preloaded payload:

```tsx
import { Gallery } from '@degallery/react';
import type { GalleryViewData } from '@degallery/react';

export function ProductGallery({ gallery }: { gallery: GalleryViewData }) {
  return <Gallery gallery={gallery} layout="Masonry" />;
}
```

Or load by gallery ID/slug through the provider:

```tsx
import { Gallery } from '@degallery/react';

export function PublishedGallery({ galleryId }: { galleryId: string }) {
  return <Gallery galleryId={galleryId} layout="Grid" />;
}
```

Supported layouts include `Grid`, `Masonry`, `Justified`, `Single`, `Carousel`, and `Stack`. The component provides loading, error, empty, and pagination behavior; consult the current docs before relying on specific defaults or customization props.

## Custom rendering

- Use `Asset` for an individual gallery item with DeGallery image behavior.
- Use `useGallery` when the app needs resolved gallery state, loading/refetch behavior, or custom lightbox composition.
- Supply alt text and keep custom controls keyboard-accessible.

See the [React gallery guide](https://docs.degallery.dev/docs/react/gallery) and [provider configuration](https://docs.degallery.dev/docs/react/provider) for current APIs. For private content and credentials, use `degallery-auth-and-private-media`.