React Galleria

React Galleria is a content gallery component.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Galleria } from 'primereact/galleria';

Getting Started

Galleria requires a value as an array of objects and can either be used as a Controlled or Uncontrolled component.

<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}></Galleria>

const itemTemplate = (item) => {
    // custom item content
}

const thumbnailTemplate = (item) => {
    // custom thumbnail content
}

Items per page

Number of items per page is defined using the numVisible property.

<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}
    numVisible={5}></Galleria>

Responsive

For responsive design, numVisible can be defined using the responsiveOptions property that should be an array of objects whose breakpoint defines the max-width to apply the settings.

<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}
    numVisible={5} responsiveOptions={responsiveOptions}></Galleria>

const responsiveOptions = [
    {
        breakpoint: '1024px',
        numVisible: 5
    },
    {
        breakpoint: '768px',
        numVisible: 3
    },
    {
        breakpoint: '560px',
        numVisible: 1
    }
];

Header and Footer

Custom content projection is available using the header and footer properties.

<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}
    header={<h1>Header</h1>}></Galleria>

Controlled vs Uncontrolled

In controlled mode, activeIndex and onItemChange properties need to be defined to control the first visible item.

<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}
    activeIndex={activeIndex} onItemChange={(e) => setActiveIndex(e.index)}></Galleria>

Uncontrolled

In uncontrolled mode, no additional properties are required. Initial item can be provided using the activeItemIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the first visible item index, prefer to use the component as controlled.

<Galleria value={images} item={itemTemplate} thumbnail={thumbnailTemplate}></Galleria>

Theming

Galleria supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Galleria showcase for demos and documentation.