v2 Breaking Changes

[igordanchenko]

v2 Breaking Changes

Release 2.0 comes with some minor breaking changes. Although the list is relatively long, the migration should be trivial for most users. Be sure to review the items that apply in your case.

onClick callback signature change

v1:

<PhotoAlbum
    onClick={(event, photo, index) => {
        // ...
    }}
    // ...
/>

v2:

<PhotoAlbum
    onClick={({event, photo, index}) => {
        // ...
    }}
    // ...
/>

SSR and defaultContainerWidth

v2 does not provide a default value for the defaultContainerWidth prop. If not defined, PhotoAlbum produces empty markup on the server and renders actual markup only on the client after hydration. If you prefer the markup to be generated on the server, you must explicitly set the defaultContainerWidth prop.

columnConstraints prop is no longer supported

v2 strictly adheres to the columns value when rendering columns or masonry layout. It renders empty columns when there aren't enough images to fill all columns, so the columnConstraints.minColumns prop is no longer relevant. However, if you prefer how things worked in v1, you can implement v1 behavior through the columns prop:

<PhotoAlbum
    layout="masonry"
    photos={photos}
    columns={Math.min(photos.length, 3)}
/>

resizeObserverProvider prop is no longer supported

v2 no longer supports custom resize observers, and only global ResizeObserver is used.

renderContainer prop no longer accepts React.forwardRef

v2 no longer accepts forwardRef-wrapped component in the renderContainer prop. You must pass the containerRef to the <div/> element when rendering custom container.

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

renderContainer signature change

v2 no longer provides the layoutOptions parameter as part of the renderContainer render function parameters. layoutOptions parameter was replaced with layout.

viewportWidth is no longer provided in the layoutOptions

v2 no longer provides the viewportWidth value in the layoutOptions object.

containerWidth parameter in the componentsProps is now optional

<PhotoAlbum
    componentsProps={(containerWidth) => {
        if (containerWidth) {
            // ...
        } else {
            // 
        }
    }}
    // ...
/>

package bundle changes

• JSX runtime was switched back to React.createElement
• ESM bundle was renamed from index.esm.js to index.mjs
• CJS bundle was renamed from index.cjs.js to index.js

type definitions changes

• RowContainerProps type was renamed to RenderRowContainerProps
• ColumnContainerProps type was renamed to RenderColumnContainerProps
• PhotoProps type was renamed to RenderPhotoProps
• ContainerProps type type was removed
• RenderContainer and RenderContainerProps types are no longer generic

[github-actions]

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀