{"library":"react-photoswipe-gallery","title":"React PhotoSwipe Gallery Component","description":"react-photoswipe-gallery is a React component wrapper that integrates the PhotoSwipe JavaScript image gallery library into React applications. It simplifies the process of creating responsive image galleries by abstracting PhotoSwipe's imperative API into declarative React components like `Gallery` and `Item`. The current stable version is 4.0.0, which includes breaking changes focused on security and refactoring. The project maintains a moderate release cadence, with patch and minor updates appearing every few months, and major versions released less frequently. Its key differentiator lies in providing a native React experience for PhotoSwipe, managing the gallery's lifecycle and element references within the React component model, reducing boilerplate code, and ensuring compatibility with modern React features.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-photoswipe-gallery"],"cli":null},"imports":["import { Gallery } from 'react-photoswipe-gallery'","import { Item } from 'react-photoswipe-gallery'","import { useGallery } from 'react-photoswipe-gallery'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useRef } from 'react';\nimport { Gallery, Item } from 'react-photoswipe-gallery';\nimport 'photoswipe/dist/photoswipe.css'; // Essential PhotoSwipe base styles\n\nconst MyPhotoGallery: React.FC = () => {\n  return (\n    <Gallery\n      options={{\n        bgOpacity: 0.8,\n        zoomAnimationDuration: 300\n      }}\n    >\n      <Item\n        original=\"https://picsum.photos/id/1018/1000/600/\"\n        thumbnail=\"https://picsum.photos/id/1018/100/60/\"\n        width=\"1000\"\n        height=\"600\"\n        caption=\"A serene landscape from Unsplash\"\n        cropped\n      >\n        {({ ref, open }) => (\n          <img\n            ref={ref as React.MutableRefObject<HTMLImageElement>}\n            onClick={open}\n            src=\"https://picsum.photos/id/1018/100/60/\"\n            alt=\"Landscape thumbnail\"\n            style={{ cursor: 'pointer', margin: '5px', borderRadius: '4px' }}\n          />\n        )}\n      </Item>\n      <Item\n        original=\"https://picsum.photos/id/1015/1000/600/\"\n        thumbnail=\"https://picsum.photos/id/1015/100/60/\"\n        width=\"1000\"\n        height=\"600\"\n        caption=\"Abstract patterns and colors\"\n        cropped\n      >\n        {({ ref, open }) => (\n          <img\n            ref={ref as React.MutableRefObject<HTMLImageElement>}\n            onClick={open}\n            src=\"https://picsum.photos/id/1015/100/60/\"\n            alt=\"Abstract thumbnail\"\n            style={{ cursor: 'pointer', margin: '5px', borderRadius: '4px' }}\n          />\n        )}\n      </Item>\n    </Gallery>\n  );\n};\n\nexport default MyPhotoGallery;\n","lang":"typescript","description":"This example demonstrates how to set up a basic image gallery using the `Gallery` and `Item` components. It includes the necessary PhotoSwipe CSS, custom options for the gallery, and correctly handles image references and click events to open the lightbox, showcasing two sample images.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}