{"library":"react-viewer","title":"React Image Viewer","description":"react-viewer is a dedicated image viewing component for React applications, providing a customizable and feature-rich lightbox experience. It is currently in version 3.2.2 and sees active development with frequent minor releases addressing bugs and adding features. A major version 4.0 is planned to re-introduce Server-Side Rendering (SSR) support. Key differentiators include its native React implementation, utilizing React Hooks and `ReactDOM.createPortal` for modern React patterns, offering a robust alternative to general-purpose JavaScript viewer libraries like Viewer.js within a React ecosystem. It supports various image operations like zooming, rotating, scaling, and offers extensive customization through props for toolbar, navbar, and general UI behavior. It ships with TypeScript type definitions.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-viewer"],"cli":null},"imports":["import Viewer from 'react-viewer';","import type { ViewerProps } from 'react-viewer';","import 'react-viewer/dist/index.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import * as React from 'react';\nimport Viewer from 'react-viewer';\n\nfunction App() {\n  const [visible, setVisible] = React.useState(false);\n  const images = [\n    { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg', alt: 'Forest' },\n    { src: 'https://images.unsplash.com/photo-1507525428034-b723cf961c3e', alt: 'Beach' }\n  ];\n\n  return (\n    <div>\n      <button onClick={() => { setVisible(true); } } style={{ padding: '10px 20px', fontSize: '16px', cursor: 'pointer' }}>\n        Show Images\n      </button>\n      <Viewer\n        visible={visible}\n        onClose={() => { setVisible(false); } }\n        images={images}\n        activeIndex={0}\n        downloadable={true}\n        zoomable={true}\n        rotatable={true}\n        scalable={true}\n        noFooter={false}\n      />\n    </div>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates how to integrate react-viewer into a functional React component, using state to control the viewer's visibility and passing an array of image objects. It includes basic interaction props for zoom, rotate, and download.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}