Custom Renderers

Photo album photos and container elements can be customized via custom render functions.

Custom Photo

You can use the following render function as a starting point:

<PhotoAlbum
  renderPhoto={({ imageProps: { src, alt, style, ...restImageProps } }) => (
    <img src={src} alt={alt} style={style} {...restImageProps} />
  )}
  // ...
/>

You can use wrapperStyle and renderDefaultPhoto helpers to wrap images with <div>, <span> or <a> tags:

<PhotoAlbum
  renderPhoto={({ photo, wrapperStyle, renderDefaultPhoto }) => (
    <a href={photo.href} style={wrapperStyle}>
      {renderDefaultPhoto({ wrapped: true })}
    </a>
  )}
  // ...
/>

Custom Container

You can use the following render function as a starting point:

<PhotoAlbum
  renderContainer={({ containerRef, containerProps, children }) => (
    <div ref={containerRef} {...containerProps}>
      {children}
    </div>
  )}
  // ...
/>

Custom Row Container

You can use the following render function as a starting point:

<PhotoAlbum
  renderRowContainer={({ rowContainerProps, children }) => (
    <div {...rowContainerProps}>{children}</div>
  )}
  // ...
/>

Custom Column Container

You can use the following render function as a starting point:

<PhotoAlbum
  renderColumnContainer={({ columnContainerProps, children }) => (
    <div {...columnContainerProps}>{children}</div>
  )}
  // ...
/>

Live Demo

212 x 153
102 x 153
229 x 153
229 x 153
131 x 197
350 x 197
350 x 197
338 x 225
157 x 225
338 x 225
269 x 173
115 x 173
259 x 173
129 x 173
145 x 218
291 x 218
396 x 218
952 x 141
310 x 232
348 x 232
174 x 232

Sandbox

Edit on StackBlitz

Source Code

View on GitHub