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