‏React Photo Album: گالری عکس ریسپانسیو برای ری‌اکت

React Photo Album یه کتابخونه‌ی متن‌بازه که کامپوننت گالری عکس ریسپانسیو برای ری‌اکت می‌سازه. این پروژه از react-photo-gallery الهام گرفته ولی کاملاً از صفر بازنویسی شده و امکانات بیشتری داره. تایپ‌اسکریپت built-in داره، با ری‌اکت ۱۸ به بالا کار می‌کنه و با SSR هم مشکلی نداره.

سه نوع چیدمان اصلی داره؛ Rows، Columns و Masonry. هر کدوم با یه الگوریتم هوشمند کار می‌کنن تا عکس‌ها به بهترین شکل ممکن کنار هم قرار بگیرن.

چیدمان Rows از الگوریتم شکست‌خطی Knuth و Plass الهام گرفته و با برنامه‌نویسی پویا بهینه‌ترین ردیف‌بندی رو پیدا می‌کنه. مشکل رایجی که توی گالری‌های معمولی داریم — مثل اینکه یه عکس پانوراما بقیه ردیف رو له می‌کنه یا عکس آخر کشیده می‌شه — اینجا حل شده. هر ردیف تا جای ممکن به targetRowHeight نزدیکه.

چیدمان Columns تعداد ستون‌ها رو از طریق پارامتر columns تعیین می‌کنه و با الگوریتم پویا عکس‌ها رو به شکلی تقسیم می‌کنه که همه ستون‌ها ارتفاع برابری داشته باشن. چیدمان Masonry هم هر عکس رو توی کوتاه‌ترین ستون می‌ذاره؛ ستون‌ها عرض مساوی دارن و تا جای ممکن هم‌ارتفاع می‌شن.

برای شروع سریع، راه‌اندازی اولیه‌اش خیلی سادهه:

import { RowsPhotoAlbum } from "react-photo-album";
import "react-photo-album/rows.css";

const photos = [
  { src: "/image1.jpg", width: 800, height: 600 },
  { src: "/image2.jpg", width: 1600, height: 900 },
];

export default function Gallery() {
  return <RowsPhotoAlbum photos={photos} />;
}

یکی از قابلیت‌های جالبش پشتیبانی از تصاویر ریسپانسیو با srcSet هست. می‌تونی چند رزولوشن از هر عکس بدی و مرورگر خودش بهترین رزولوشن رو با توجه به اندازه‌ی صفحه انتخاب می‌کنه. این ویژگی هم توی SSR هم توی client-side رندر کار می‌کنه:

const photos = [
  {
    src: "/image1_800x600.jpg",
    width: 800,
    height: 600,
    srcSet: [
      { src: "/image1_400x300.jpg", width: 400, height: 300 },
      { src: "/image1_200x150.jpg", width: 200, height: 150 },
    ],
  },
];

export default function Gallery() {
  return <RowsPhotoAlbum photos={photos} sizes={{ size: "calc(100vw - 240px)" }} />;
}

در مورد SSR باید یه نکته‌ی مهم رو بدونی: React Photo Album از CSS flexbox و CSS calc برای محاسبه‌ی ابعاد عکس‌ها استفاده می‌کنه. این یعنی حتی قبل از hydration هم مارکاپ سرور کاملاً درست به نظر می‌رسه. برای فعال کردن SSR باید prop مربوط به defaultContainerWidth رو ست کنی، وگرنه کامپوننت روی سرور خروجی خالی می‌ده. اگه layout shift بعد از hydration برات مشکل‌سازه، می‌تونی از prop مربوط به skeleton استفاده کنی.

کلاً این کتابخونه برای پروژه‌هایی که نیاز به گالری عکس حرفه‌ای، ریسپانسیو و بهینه دارن گزینه‌ی خوبیه — هم performanceش خوبه، هم TypeScript داره، هم SSR-friendly هست.

نکات کلیدی:

• سه چیدمان Rows، Columns و Masonry با الگوریتم‌های بهینه‌ساز
• پشتیبانی از تصاویر ریسپانسیو با srcSet و تغییر خودکار رزولوشن
• سازگار با SSR؛ مارکاپ سرور قبل از hydration هم pixel-perfect به نظر می‌رسه
• TypeScript built-in، بدون نیاز به نصب جداگانه‌ی type definition
• مناسب برای گالری‌های بزرگ با تعداد عکس زیاد
• لایسنس MIT و متن‌باز