{"library":"react-photo-album","title":"React Photo Album","description":"React Photo Album is a responsive React component designed for building dynamic photo galleries, currently at version 3.6.0. It offers three distinct layout options: rows, columns, and masonry, each powered by sophisticated dynamic programming algorithms to ensure optimal arrangement and visual balance. Its rows layout, inspired by the Knuth and Plass algorithm, minimizes deviations from a target row height, preventing stretched images or awkward last rows. The columns layout dynamically balances content, while masonry places photos into the shortest column. The library is actively maintained with regular updates and emphasizes performance, SSR compatibility, built-in TypeScript definitions, and automatic responsive image handling. It serves as a re-engineered alternative to `react-photo-gallery`, supporting React 18+ and Node 18+ and requiring modern ESM-compatible bundlers.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-photo-album"],"cli":null},"imports":["import PhotoAlbum from 'react-photo-album';","import { RowsPhotoAlbum } from 'react-photo-album';","import type { Photo } from 'react-photo-album';","import 'react-photo-album/styles.css'; // For PhotoAlbum (3-in-1 component)\nimport 'react-photo-album/rows.css'; // For RowsPhotoAlbum"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { RowsPhotoAlbum } from 'react-photo-album';\nimport 'react-photo-album/rows.css';\n\nconst photos = [\n  { src: 'https://images.unsplash.com/photo-1594904005118-a6825c9b2e2d', width: 800, height: 600, alt: 'A scenic landscape' },\n  { src: 'https://images.unsplash.com/photo-1506157788612-fc905187e5cf', width: 1600, height: 900, alt: 'City skyline at night' },\n  { src: 'https://images.unsplash.com/photo-1549721727-b089b2f6c0f0', width: 1200, height: 800, alt: 'Close-up of a flower' },\n  { src: 'https://images.unsplash.com/photo-1510798083980-0a14d5f479d2', width: 900, height: 1200, alt: 'Person hiking on a mountain' },\n  { src: 'https://images.unsplash.com/photo-1509343206535-c3f2b6a2f8d0', width: 1000, height: 750, alt: 'Abstract art piece' }\n];\n\nexport default function Gallery() {\n  return (\n    <RowsPhotoAlbum\n      photos={photos}\n      targetRowHeight={250}\n      spacing={8}\n      onClick={({ index }) => console.log(`Clicked photo at index: ${index}`)}\n    />\n  );\n}","lang":"typescript","description":"Demonstrates a basic responsive photo gallery using the RowsPhotoAlbum component with dynamic photo data, custom row height, spacing, and a click handler.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}