How to exactly use custom renderer?

[belfortf]

Hi, I'm struggling on how to properly use the custom renderer. I have modified the photos array to include price and category:

const unsplashPhotos = [
    { id: "8gVv6nxq6gY", width: 1080, height: 800, title: 'Captivating Landscape', price: 8, category: 'Nature' },
    { id: "Dhmn6ete6g8", width: 1080, height: 1620, title: 'Mysterious Silhouette', price: 6, category: 'Abstract' }];

By using "alt", I can show the title under the picture (using custom renderer example). However, how do I show the price and category as they're not defined?

What I did:

const photos: Photo[] = unsplashPhotos.map((photo) => ({
    src: unsplashLink(photo.id, photo.width, photo.height),
    width: photo.width,
    height: photo.height,
    alt: photo.title, //I added this line
    srcSet: breakpoints.map((breakpoint) => {
        const height = Math.round((photo.height / photo.width) * breakpoint);
        return {
            src: unsplashLink(photo.id, breakpoint, height),
            width: breakpoint,
            height,
        };
    }),
}));

[igordanchenko]

Hi there!

You can add custom photo attributes by simply adding them to your photo objects, just don't cast the photos array to Photo[].

const photos = unsplashPhotos.map((photo) => ({
    src: unsplashLink(photo.id, photo.width, photo.height),
    width: photo.width,
    height: photo.height,
    alt: photo.title, //I added this line
    category: photo.category, // photo category
    price: photo.price, // photo price
    srcSet: breakpoints.map((breakpoint) => {
        const height = Math.round((photo.height / photo.width) * breakpoint);
        return {
            src: unsplashLink(photo.id, breakpoint, height),
            width: breakpoint,
            height,
        };
    }),
}));

Then you should be able to access your custom attributes inside the renderPhoto function as follows:

renderPhoto={({
  photo: { category, price },
  wrapperStyle,
  renderDefaultPhoto,
}) => (
  <div className="photo" style={wrapperStyle}>
    {renderDefaultPhoto({ wrapped: true })}
    <span className="category">{category}</span>
    <span className="price">${price}</span>
  </div>
)}

https://codesandbox.io/p/sandbox/react-photo-album-115-7p7dc3?file=%2Fsrc%2FApp.tsx

[belfortf]

Hi Igor, thanks a lot, it works like a charm. I will keep on testing react-photo-album as I'm trying to integrate it on my site. Keep up the great work, this gallery is the best one I've ever seen !