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

307 x 222

148 x 222

333 x 222

299 x 200

133 x 200

355 x 200

460 x 259

388 x 259

146 x 210

315 x 210

327 x 210

135 x 203

305 x 203

152 x 203

135 x 203

359 x 269

489 x 269

908 x 135

293 x 220

330 x 220

165 x 220

Sandbox

Source Code