{"repo":"Caldis/react-zmage","free":true,"listed":false,"github":"https://github.com/Caldis/react-zmage","clone":"git clone https://github.com/Caldis/react-zmage.git","description":"Turn any <img> into an origin-expand fullscreen React image viewer.","language":"TypeScript","stars":942,"topics":["react","image","zoom","slidershow","slider","zoomer","zmage","react-zmage","slide","img"],"license":"MIT","category":"ui-components","readme_excerpt":"English 简体中文 react-zmage Turn any &lt;img&gt; into an origin-expand fullscreen React image viewer. Drop-in. Zero config. React 16.8 → 19. Live Demo · Demo Video · Playground · Use Cases · API · AGENTS.md --- Highlights - Origin-expand replacement. Native props ( className , style , onClick , …) pass through to the underlying image. Existing images open into a fullscreen viewer from their original position. - SSR / RSC safe. A separate react-zmage/ssr entry avoids touching document at import time. Verified against Next.js 15 App Router, Vite SSR, and Express renderToString. - Three call modes. Use it as a component, call it imperatively ( Zmage.browsing() ), or wrap any HTML subtree to auto-attach the viewer to every inside. --- Install Peer deps: react@ =16.8 =16.8 . Imperative — Zmage.browsing() When to use: you have no good cover , or you don't want to mount extra nodes in your component tree. Open the viewer from event handlers, async callbacks, or third-party widgets — anywhere. Zmage.browsing(opts) accepts the same props bag as and returns a () = void destructor for manual close. Guard with typeof window !== 'undefined' if it can run on the server. The react-zmage/ssr entry provides the same API without touching document at import time. Wrapper — When to use: you don't control the rendered HTML — markdown output, CMS rich text, dangerouslySetInnerHTML . Wrap the subtree and every inside automatically gains the viewer, without modifying the source content. The wrapper que","default_branch":null,"files":null,"tree":[],"storefront":"/r/Caldis","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/Caldis/react-zmage/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}