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

CodeSandbox

Edit on CodeSandbox

Source Code

View on GitHub