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