React Gallery - Customize Item Appearance

Gallery items are not sctrictly images. They can contain text or other elements of your choice. For a minor customization of Gallery items, you can define specific fields in item data objects. For example, the following code generates two items: one is disabled and the other has a specified alt attribute.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Gallery } from 'devextreme-react/gallery';
  •  
  • const dataSource = [{
  • imageSrc: 'https://js.devexpress.com/Content/images/doc/24_1/PhoneJS/person1.png',
  • disabled: true
  • }, {
  • imageSrc: 'https://js.devexpress.com/Content/images/doc/24_1/PhoneJS/person2.png',
  • imageAlt: 'Peter'
  • }];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Gallery
  • dataSource={dataSource}
  • height={300}
  • />
  • );
  • }
  • }
  •  
  • export default App;

If you need a more flexible solution, define an itemTemplate.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Gallery } from 'devextreme-react/gallery';
  •  
  • const dataSource = [
  • { path: "https://js.devexpress.com/Content/images/doc/24_1/PhoneJS/person1.png", name: "Maria" },
  • { path: "https://js.devexpress.com/Content/images/doc/24_1/PhoneJS/person2.png", name: "John" },
  • { path: "https://js.devexpress.com/Content/images/doc/24_1/PhoneJS/person3.png", name: "Xavier" }
  • ];
  •  
  • const renderGalleryItem = (itemData) => {
  • return (
  • <div>
  • <p><b>Name</b>: <span>{itemData.name}</span></p>
  • <img src={itemData.path} alt={itemData.name} />
  • </div>
  • );
  • }
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Gallery
  • dataSource={dataSource}
  • height={300}
  • itemRender={renderGalleryItem}
  • />
  • );
  • }
  • }
  •  
  • export default App;

Built-In Template Engine Demo 3rd-Party Template Engine Demo

See Also