feat: deprecate images photo prop in favor of srcSet

README.md

@@ -100,7 +100,7 @@ as possible.
 React Photo Album automatically generates `sizes` and `srcset` image attributes. In the case of SSR, React Photo Album
 includes `sizes` and `srcset` image attributes in the server-rendered markup, allowing browsers to pick images of the
 most appropriate resolution depending on their viewport size. To enable images with automatic resolution switching, 
-simply provide smaller images in the photo `images` attribute.
+simply provide smaller images in the photo `srcSet` attribute.
 
 ```js
 import PhotoAlbum from "react-photo-album";
@@ -110,7 +110,7 @@ const photos = [
  src: "/images/image1_800x600.jpg",
  width: 800,
  height: 600,
- images: [
+ srcSet: [
  { src: "/images/image1_400x300.jpg", width: 400, height: 300 },
  { src: "/images/image1_200x150.jpg", width: 200, height: 150 }
  ]
@@ -119,7 +119,7 @@ const photos = [
  src: "/images/image2_1600x900.jpg",
  width: 1600,
  height: 900,
- images: [
+ srcSet: [
  { src: "/images/image2_800x450.jpg", width: 800, height: 450 },
  { src: "/images/image2_400x225.jpg", width: 400, height: 225 }
  ]

examples/cdn/photos.js

@@ -31,7 +31,7 @@ var photos = unsplashPhotos.map((photo) => ({
  src: unsplashLink(photo.id, photo.width, photo.height),
  width: photo.width,
  height: photo.height,
- images: breakpoints.map((breakpoint) => {
+ srcSet: breakpoints.map((breakpoint) => {
  const height = Math.round((photo.height / photo.width) * breakpoint);
  return {
  src: unsplashLink(photo.id, breakpoint, height),

examples/columns-layout/src/photos.ts

@@ -31,7 +31,7 @@ const photos = unsplashPhotos.map((photo) => ({
  src: unsplashLink(photo.id, photo.width, photo.height),
  width: photo.width,
  height: photo.height,
- images: breakpoints.map((breakpoint) => {
+ srcSet: breakpoints.map((breakpoint) => {
  const height = Math.round((photo.height / photo.width) * breakpoint);
  return {
  src: unsplashLink(photo.id, breakpoint, height),

examples/custom-renderers/src/photos.ts

@@ -33,7 +33,7 @@ const photos: Photo[] = unsplashPhotos.map((photo) => ({
  src: unsplashLink(photo.id, photo.width, photo.height),
  width: photo.width,
  height: photo.height,
- images: breakpoints.map((breakpoint) => {
+ srcSet: breakpoints.map((breakpoint) => {
  const height = Math.round((photo.height / photo.width) * breakpoint);
  return {
  src: unsplashLink(photo.id, breakpoint, height),

examples/lightbox/src/App.tsx

@@ -14,8 +14,6 @@ import "yet-another-react-lightbox/plugins/thumbnails.css";
 
 import photos from "./photos";
 
-const slides = photos.map(({ src, width, height, images }) => ({ src, width, height, srcSet: images }));
-
 export default function App() {
  const [index, setIndex] = useState(-1);
 
@@ -24,7 +22,7 @@ export default function App() {
  <PhotoAlbum photos={photos} layout="rows" targetRowHeight={150} onClick={({ index }) => setIndex(index)} />
 
  <Lightbox
- slides={slides}
+ slides={photos}
  open={index >= 0}
  index={index}
  close={() => setIndex(-1)}

examples/lightbox/src/photos.ts

@@ -35,7 +35,7 @@ const photos = unsplashPhotos.map((photo) => {
  src: unsplashLink(photo.id, width, height),
  width,
  height,
- images: breakpoints.map((breakpoint) => {
+ srcSet: breakpoints.map((breakpoint) => {
  const height = Math.round((photo.height / photo.width) * breakpoint);
  return {
  src: unsplashLink(photo.id, breakpoint, height),

examples/masonry-layout/src/photos.ts

@@ -31,7 +31,7 @@ const photos = unsplashPhotos.map((photo) => ({
  src: unsplashLink(photo.id, photo.width, photo.height),
  width: photo.width,
  height: photo.height,
- images: breakpoints.map((breakpoint) => {
+ srcSet: breakpoints.map((breakpoint) => {
  const height = Math.round((photo.height / photo.width) * breakpoint);
  return {
  src: unsplashLink(photo.id, breakpoint, height),

examples/nextjs/src/photos.ts

@@ -31,7 +31,7 @@ const photos = unsplashPhotos.map((photo) => ({
  src: unsplashLink(photo.id, photo.width, photo.height),
  width: photo.width,
  height: photo.height,
- images: breakpoints.map((breakpoint) => {
+ srcSet: breakpoints.map((breakpoint) => {
  const height = Math.round((photo.height / photo.width) * breakpoint);
  return {
  src: unsplashLink(photo.id, breakpoint, height),

examples/playground/src/photos.ts

@@ -31,7 +31,7 @@ const photos = unsplashPhotos.map((photo) => ({
  src: unsplashLink(photo.id, photo.width, photo.height),
  width: photo.width,
  height: photo.height,
- images: breakpoints.map((breakpoint) => {
+ srcSet: breakpoints.map((breakpoint) => {
  const height = Math.round((photo.height / photo.width) * breakpoint);
  return {
  src: unsplashLink(photo.id, breakpoint, height),

examples/rows-layout/src/photos.ts

@@ -31,7 +31,7 @@ const photos = unsplashPhotos.map((photo) => ({
  src: unsplashLink(photo.id, photo.width, photo.height),
  width: photo.width,
  height: photo.height,
- images: breakpoints.map((breakpoint) => {
+ srcSet: breakpoints.map((breakpoint) => {
  const height = Math.round((photo.height / photo.width) * breakpoint);
  return {
  src: unsplashLink(photo.id, breakpoint, height),

examples/sortable-gallery/src/photos.ts

@@ -31,7 +31,7 @@ const photos = unsplashPhotos.map((photo) => ({
  src: unsplashLink(photo.id, photo.width, photo.height),
  width: photo.width,
  height: photo.height,
- images: breakpoints.map((breakpoint) => {
+ srcSet: breakpoints.map((breakpoint) => {
  const height = Math.round((photo.height / photo.width) * breakpoint);
  return {
  src: unsplashLink(photo.id, breakpoint, height),

package.json

@@ -50,7 +50,7 @@
  "@rollup/plugin-typescript": "^11.1.0",
  "@types/jest": "^29.5.1",
  "@types/react": "^18.2.0",
- "@types/react-dom": "^18.2.0",
+ "@types/react-dom": "^18.2.1",
  "@types/react-test-renderer": "^18.0.0",
  "@typescript-eslint/eslint-plugin": "^5.59.1",
  "@typescript-eslint/parser": "^5.59.1",
@@ -66,7 +66,7 @@
  "husky": "^8.0.3",
  "jest": "^29.5.0",
  "jest-environment-jsdom": "^29.5.0",
- "lint-staged": "^13.2.1",
+ "lint-staged": "^13.2.2",
  "npm-run-all": "^4.1.5",
  "prettier": "^2.8.8",
  "react": "^18.2.0",

src/components/renderers/PhotoRenderer.tsx

@@ -30,10 +30,11 @@ function srcSetAndSizes<T extends Photo = Photo>(photo: T, layout: PhotoLayout,
  let srcSet;
  let sizes;
 
- if (photo.images && photo.images.length > 0) {
- srcSet = photo.images
+ const images = photo.srcSet || photo.images;
+ if (images && images.length > 0) {
+ srcSet = images
  .concat(
- !photo.images.find(({ width }) => width === photo.width)
+ !images.find(({ width }) => width === photo.width)
  ? [{ src: photo.src, width: photo.width, height: photo.height }]
  : []
  )

src/types.ts

@@ -53,8 +53,11 @@ export interface Photo extends Image {
  alt?: string;
  /** Optional image `title` attribute. */
  title?: string;
- /** Optional array of alternative images to be included in the `srcset` attribute. */
+ // TODO v3: remove
+ /** @deprecated - use `srcSet` instead */
  images?: Image[];
+ /** Optional array of alternative images to be included in the `srcset` attribute. */
+ srcSet?: Image[];
 }
 
 export type RenderPhotoProps<T extends Photo = Photo> = {

test/PhotoAlbum.test.tsx

@@ -6,7 +6,7 @@ import photos from "./photos";
 
 const photosWithSrcSet = photos.map((photo) => ({
  ...photo,
- images: [{ src: photo.src, width: Math.round(photo.width / 2), height: Math.round(photo.height / 2) }],
+ srcSet: [{ src: photo.src, width: Math.round(photo.width / 2), height: Math.round(photo.height / 2) }],
 }));
 
 const createNodeMock =
@@ -454,11 +454,11 @@ describe("PhotoAlbum", () => {
  whenAskedToRender(
  <PhotoAlbum
  layout="rows"
- photos={photosWithSrcSet.map(({ src, width, height, images }) => ({
+ photos={photosWithSrcSet.map(({ src, width, height, srcSet }) => ({
  src,
  width,
  height,
- images: [{ src, width, height }, ...images],
+ srcSet: [{ src, width, height }, ...srcSet],
  }))}
  />
  );