PageSourceSearch

https://react-photo-view.vercel.app/en-US

html react-photo-view.vercel.app collected 2026-10-03 07:35:14 UTC 37,019 bytes, 54 lines download raw bytes

1<!DOCTYPE html><html lang="en-US"><head><meta charSet="utf-8"/><title>An exquisite React photo preview component – react-photo-view</title><meta name="robots" content="index,follow"/><meta property="og:title" content="An exquisite React photo preview component – react-photo-view"/><meta name="theme-color" content="#111" media="(prefers-color-scheme: dark)"/><style>
2        :root {
3          --nextra-primary-hue: 212deg;
4          --nextra-primary-saturation: 100%;
5          --nextra-navbar-height: 4rem;
6          --nextra-menu-height: 3.75rem;
7          --nextra-banner-height: 2.5rem;
8        }
9        
10        .dark {
11          --nextra-primary-hue: 204deg;
12          --nextra-primary-saturation: 100%;
13        }
14      </style><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="description" content="react-photo-view: A beautiful photo preview component"/><meta name="og:title" content="react-photo-view: A beautiful photo preview component"/><meta name="next-head-count" content="9"/><link rel="preload" href="/_next/static/css/6201c6ae933444a9.css" as="style"/><link rel="stylesheet" href="/_next/static/css/6201c6ae933444a9.css" data-n-g=""/><link rel="preload" href="/_next/static/css/1cfd12a26cc13b2d.css" as="style"/><link rel="stylesheet" href="/_next/static/css/1cfd12a26cc13b2d.css" data-n-p=""/><noscript data-n-css=""></noscript>
14<script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script>
14<script src="/_next/static/chunks/webpack-6ef43a8d4a395f49.js" defer=""></script>
14<script src="/_next/static/chunks/framework-e0f347a11a70369e.js" defer=""></script>
14<script src="/_next/static/chunks/main-7b9b0c5e96634b74.js" defer=""></script>
14<script src="/_next/static/chunks/pages/_app-2f0ac32cdfec585f.js" defer=""></script>
14<script src="/_next/static/chunks/742-e848693aceb526ea.js" defer=""></script>
14<script src="/_next/static/chunks/32-710598f50b2048f2.js" defer=""></script>
14<script src="/_next/static/chunks/pages/index.en-US-d6ac15d79461e515.js" defer=""></script>
14<script src="/_next/static/Z2tuPYteLSvqJyhXRfrxm/_buildManifest.js" defer=""></script>
14<script src="/_next/static/Z2tuPYteLSvqJyhXRfrxm/_ssgManifest.js" defer=""></script>
14</head><body><div id="__next">
14<script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()</script>
14<div dir="ltr">
14<script>document.documentElement.setAttribute('dir','ltr')</script>
14<div class="nextra-nav-container nx-sticky nx-top-0 nx-z-20 nx-w-full nx-bg-transparent print:nx-hidden"><div class="nextra-nav-container-blur nx-pointer-events-none nx-absolute nx-z-[-1] nx-h-full nx-w-full nx-bg-white dark:nx-bg-dark nx-shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] dark:nx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:nx-shadow-[0_0_0_1px_#000] contrast-more:dark:nx-shadow-[0_0_0_1px_#fff]"></div><nav class="nx-mx-auto nx-flex nx-h-[var(--nextra-navbar-height)] nx-max-w-[90rem] nx-items-center nx-justify-end nx-gap-2 nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]"><a class="nx-flex nx-items-center hover:nx-opacity-75 ltr:nx-mr-auto rtl:nx-ml-auto" href="/en-US"><span class="mx-2 font-extrabold hidden md:inline select-none">react-photo-view</span></a><a class="nx-text-sm contrast-more:nx-text-gray-700 contrast-more:dark:nx-text-gray-100 nx-relative -nx-ml-2 nx-hidden nx-whitespace-nowrap nx-p-2 md:nx-inline-block nx-text-gray-600 hover:nx-text-gray-800 dark:nx-text-gray-400 dark:hover:nx-text-gray-200" aria-current="false" href="/en-US/docs/getting-started"><span class="nx-absolute nx-inset-x-0 nx-text-center">Docs</span><span class="nx-invisible nx-font-medium">Docs</span></a><div class="nextra-search nx-relative md:nx-w-64 nx-hidden md:nx-inline-block mx-min-w-[200px]"><div class="nx-relative nx-flex nx-items-center nx-text-gray-900 contrast-more:nx-text-gray-800 dark:nx-text-gray-300 contrast-more:dark:nx-text-gray-300"><input spellcheck="false" class="nx-block nx-w-full nx-appearance-none nx-rounded-lg nx-px-3 nx-py-2 nx-transition-colors nx-text-base nx-leading-tight md:nx-text-sm nx-bg-black/[.05] dark:nx-bg-gray-50/10 focus:nx-bg-white dark:focus:nx-bg-dark placeholder:nx-text-gray-500 dark:placeholder:nx-text-gray-400 contrast-more:nx-border contrast-more:nx-border-current" type="search" placeholder="Search documentation…" value=""/></div></div><a href="https://github.com/MinJieLiu/react-photo-view" target="_blank" rel="noreferrer" class="nx-p-2 nx-text-current"><svg width="24" height="24" fill="currentColor" viewBox="3 3 18 18"><title>GitHub</title><path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path></svg><span class="nx-sr-only">GitHub</span><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a><button type="button" aria-label="Menu" class="nextra-hamburger -nx-mr-2 nx-rounded nx-p-2 active:nx-bg-gray-400/20 md:nx-hidden"><svg fill="none" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" class=""><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16"></path></g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16"></path><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 18h16"></path></g></svg></button></nav></div><div class="nx-mx-auto nx-flex nx-max-w-[90rem]"><div class="max-xl:nx-hidden nx-h-0 nx-w-64 nx-shrink-0"></div><div class="motion-reduce:nx-transition-none [transition:background-color_1.5s_ease] nx-bg-transparent"></div><aside class="nextra-sidebar-container nx-flex nx-flex-col md:nx-top-16 md:nx-shrink-0 motion-reduce:nx-transform-none nx-transform-gpu nx-transition-all nx-ease-in-out print:nx-hidden md:nx-w-64 md:nx-hidden max-md:[transform:translate3d(0,-100%,0)]"><div class="nx-px-4 nx-pt-4 md:nx-hidden"><div class="nextra-search nx-relative md:nx-w-64"><div class="nx-relative nx-flex nx-items-center nx-text-gray-900 contrast-more:nx-text-gray-800 dark:nx-text-gray-300 contrast-more:dark:nx-text-gray-300"><input spellcheck="false" class="nx-block nx-w-full nx-appearance-none nx-rounded-lg nx-px-3 nx-py-2 nx-transition-colors nx-text-base nx-leading-tight md:nx-text-sm nx-bg-black/[.05] dark:nx-bg-gray-50/10 focus:nx-bg-white dark:focus:nx-bg-dark placeholder:nx-text-gray-500 dark:placeholder:nx-text-gray-400 contrast-more:nx-border contrast-more:nx-border-current" type="search" placeholder="Search documentation…" value=""/></div></div></div><div class="nx-overflow-y-auto nx-overflow-x-hidden nx-p-4 nx-grow md:nx-h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))] nextra-scrollbar"></div>
14<div class="nx-sticky nx-bottom-0 nx-bg-white dark:nx-bg-dark nx-mx-4 nx-py-4 nx-shadow-[0_-12px_16px_#fff] nx-flex nx-items-center nx-gap-2 dark:nx-border-neutral-800 dark:nx-shadow-[0_-12px_16px_#111] contrast-more:nx-border-neutral-400 contrast-more:nx-shadow-none contrast-more:dark:nx-shadow-none nx-justify-end nx-border-t" data-toggle-animation="off"><button title="Change language" class="nx-h-7 nx-rounded-md nx-px-2 nx-text-left nx-text-xs nx-font-medium nx-text-gray-600 nx-transition-colors dark:nx-text-gray-400 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 nx-grow" id="headlessui-listbox-button-:R2fjcm:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="nx-flex nx-items-center nx-gap-2"><svg viewBox="2 2 16 16" width="12" height="12" fill="currentColor"><path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd"></path></svg><span class="">English</span></span></button><div class=""><button title="Change theme" class="nx-h-7 nx-rounded-md nx-px-2 nx-text-left nx-text-xs nx-font-medium nx-text-gray-600 nx-transition-colors dark:nx-text-gray-400 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50" id="headlessui-listbox-button-:R2njcm:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><div class="nx-flex nx-items-center nx-gap-2 nx-capitalize"><svg fill="none" viewBox="3 3 18 18" width="12" height="12" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span class="md:nx-hidden">Light</span></div></button></div></div></aside><nav class="nextra-toc nx-order-last nx-hidden nx-w-64 nx-shrink-0 xl:nx-block print:nx-hidden" aria-label="table of contents"></nav><div id="reach-skip-nav"></div><article class="nx-w-full nx-break-words nextra-content nx-flex nx-min-h-[calc(100vh-var(--nextra-navbar-height))] nx-min-w-0 nx-justify-center nx-pb-8 nx-pr-[calc(env(safe-area-inset-right)-1.5rem)]"><main class="nx-w-full nx-min-w-0 nx-max-w-6xl nx-px-6 nx-pt-4 md:nx-px-12"><h1 class="text-center font-bold md:text-5xl mt-8">react-photo-view</h1>
15<div class="nextra-bleed nx-relative -nx-mx-6 nx-mt-6 md:-nx-mx-8 2xl:-nx-mx-24"><div class="mx-auto max-w-full w-[880px] text-center px-4 mb-10"><p class="text-lg mb-2 text-gray-600 md:!text-2xl">A beautiful photo preview component</p><div class="features_features__OBEXl"><div class="features_feature__4SvtF"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M20 8h-2A5 5 0 0 0 8 8H6a7 7 0 0 1 14 0Z"></path><path fill="currentColor" d="M25 15a2.94 2.94 0 0 0-1.47.4A3 3 0 0 0 21 14a2.94 2.94 0 0 0-1.47.4A3 3 0 0 0 16 13.18V8a3 3 0 0 0-6 0v11.1l-2.23-1.52A2.93 2.93 0 0 0 6 17a3 3 0 0 0-2.12 5.13l8 7.3A6.16 6.16 0 0 0 16 31h5a7 7 0 0 0 7-7v-6a3 3 0 0 0-3-3Zm1 9a5 5 0 0 1-5 5h-5a4.17 4.17 0 0 1-2.76-1l-7.95-7.3A1 1 0 0 1 5 20a1 1 0 0 1 1.6-.8l5.4 3.7V8a1 1 0 0 1 2 0v11h2v-3a1 1 0 0 1 2 0v3h2v-2a1 1 0 0 1 2 0v2h2v-1a1 1 0 0 1 2 0Z"></path></svg><h4>Touch gesture</h4></div><div class="features_feature__4SvtF"><svg width="1em" height="1em" viewBox="0 0 36 36"><path fill="currentColor" d="M10.16 31.71a4.4 4.4 0 0 1-4.64-1a4.34 4.34 0 0 1-1.29-3.11a4.41 4.41 0 0 1 .18-1.2a11.61 11.61 0 0 1-1-2.56a6.4 6.4 0 0 0 9.33 8.63a11.55 11.55 0 0 1-2.58-.76Zm8.25-4.03a7.61 7.61 0 0 1-9.08-1.26a7.58 7.58 0 0 1-1.27-9.06a14.26 14.26 0 0 1-.37-2.85a9.58 9.58 0 0 0 .22 13.33a9.63 9.63 0 0 0 13.35.22a14.46 14.46 0 0 1-2.85-.38Z"></path>
15<path fill="currentColor" d="M21.66 26.21a12.1 12.1 0 1 1 8.57-3.54a12.11 12.11 0 0 1-8.57 3.54Zm0-22.21a10.11 10.11 0 0 0-10.12 10.11a10 10 0 0 0 3 7.14a10.12 10.12 0 0 0 14.31 0A10.11 10.11 0 0 0 21.66 4Zm7.86 18Z"></path></svg><h4>Feedback animation</h4></div><div class="features_feature__4SvtF"><svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13 11H2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Zm-5.56 9l1.93-1.93a.3.3 0 0 1 .5 0L11.79 20ZM12 17.38l-.72-.71a2.41 2.41 0 0 0-3.33 0L4.61 20H3v-7h9ZM2 4.11a1 1 0 0 0 .86-.49A1.05 1.05 0 0 0 3.05 3A1 1 0 0 0 2 2a1 1 0 0 0-1 1v.1a1 1 0 0 0 1 1.01ZM9.91 4h.19a1 1 0 0 0 0-2h-.19a1 1 0 0 0 0 2ZM2 8.78a1 1 0 0 0 1-1v-.22a1 1 0 1 0-2 0v.22a1 1 0 0 0 1 1ZM14.09 2h-.19a1 1 0 0 0 0 2h.19a1 1 0 0 0 0-2ZM5.91 4h.19a1 1 0 0 0 0-2h-.19a1 1 0 0 0 0 2ZM22 6.4a1 1 0 0 0-1 1v.21a1 1 0 0 0 2 0V7.4a1 1 0 0 0-1-1ZM17.12 20h-.24a1 1 0 1 0 0 2h.24a1 1 0 0 0 0-2ZM21.9 2a1 1 0 0 0-.9 1a1 1 0 0 0 .1.42a1 1 0 0 0 1.9-.31V3a1.09 1.09 0 0 0-1.1-1Zm.1 8.9a1 1 0 0 0-1 1v.22a1 1 0 0 0 2 0v-.22a1 1 0 0 0-1-1ZM18.09 2h-.19a1 1 0 0 0 0 2h.19a1 1 0 0 0 0-2ZM22 20a.93.93 0 0 0-.44.11A1 1 0 0 0 21 21a1 1 0 0 0 1 1a1.09 1.09 0 0 0 1-1.1a1 1 0 0 0-1-.9Zm0-4.56a1 1 0 0 0-1 1v.22a1 1 0 1 0 2 0v-.26a1 1 0 0 0-1-1Z"></path></svg><h4>Image adaptation</h4></div><div class="features_feature__4SvtF"><svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3 11h8V3H3v8zm2-6h4v4H5V5zm8-2v8h8V3h-8zm6 6h-4V5h4v4zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm13-2h-2v3h-3v2h3v3h2v-3h3v-2h-3z"></path></svg><h4>Custom element</h4></div><div class="features_feature__4SvtF"><svg width="1.13em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M528 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h480c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm8 336c0 4.411-3.589 8-8 8H48c-4.411 0-8-3.589-8-8V112c0-4.411 3.589-8 8-8h480c4.411 0 8 3.589 8 8v288zM170 270v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm-336 82v-28c0-6.627-5.373-12-12-12H82c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm384 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zM122 188v-28c0-6.627-5.373-12-12-12H82c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm-98 158v-16c0-6.627-5.373-12-12-12H180c-6.627 0-12 5.373-12 12v16c0 6.627 5.373 12 12 12h216c6.627 0 12-5.373 12-12z"></path></svg><h4>keyboard navigation</h4></div><div class="features_feature__4SvtF"><svg width="1em" height="1em" viewBox="0 0 15 15"><path fill="none" stroke="currentColor" d="M12.5 8v-.167c0-.736-.597-1.333-1.333-1.333H10a1.5 1.5 0 1 0 0 3h1a1.5 1.5 0 0 1 0 3h-1A1.5 1.5 0 0 1 8.5 11M8 6.5H3m2.5 0V13M.5.5h14v14H.5V.5Z"></path></svg><h4>Based on TypeScript</h4></div><div class="features_feature__4SvtF"><svg width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M8 18C19.954 18 20.917 7.83 20.994 2.997a.983.983 0 0 0-1.006-.988C3 2.321 3 10.557 3 18v4"></path><path d="M3 18s0-6 8-7"></path></g></svg><h4>Lightweight</h4></div><div class="features_feature__4SvtF"><svg width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
15<path fill="currentColor" d="M7 12.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1Zm5 0a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1Zm5 0a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1Z"></path><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Z"></path></g></svg><h4>More...</h4></div></div></div></div>
16<p class="nx-mt-6 nx-leading-7 first:nx-mt-0"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">react-photo-view</code> has an unparalleled preview interaction experience: starting from the opening of the image, the animation, details and interaction of each frame have been carefully designed and repeatedly debugged, which is comparable to the effect of native image preview.</p>
17<div class="mt-16 mb-20 text-center"><p class="nx-mt-6 nx-leading-7 first:nx-mt-0"><a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/en-US/docs/getting-started">Getting Started</a> · <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/en-US/docs/api">API</a> ·
18<a href="https://github.com/MinJieLiu/react-photo-view.git" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">GitHub<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></p></div>
19<div class="flex flex-wrap items-center my-6"><img src="/_next/static/media/1.c788857d.jpg" class="mr-2 mb-2 w-24 h-24 cursor-pointer object-cover" alt=""/><img src="/_next/static/media/2.b43f1ead.jpg" class="mr-2 mb-2 w-24 h-24 cursor-pointer object-cover" alt=""/><img src="/_next/static/media/3.70695fb9.jpg" class="mr-2 mb-2 w-24 h-24 cursor-pointer object-cover" alt=""/><img src="/_next/static/media/4.57ff8e86.jpg" class="mr-2 mb-2 w-24 h-24 cursor-pointer object-cover" alt=""/><img src="/_next/static/media/5.7ace37c7.jpg" class="mr-2 mb-2 w-24 h-24 cursor-pointer object-cover" alt=""/><img src="/_next/static/media/6.0271162c.jpg" class="mr-2 mb-2 w-24 h-24 cursor-pointer object-cover" alt=""/></div>
20<h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">Overview<a href="#overview" id="overview" class="subheading-anchor" aria-label="Permalink for this section"></a></h2>
21<div class="nextra-code-block nx-relative nx-mt-6 first:nx-mt-0"><pre class="nx-bg-primary-700/5 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[.9em] contrast-more:nx-border contrast-more:nx-border-primary-900/20 contrast-more:nx-contrast-150 contrast-more:dark:nx-border-primary-100/40 nx-py-4" data-language="jsx" data-theme="default"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr" data-language="jsx" data-theme="default"><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> { PhotoProvider</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> PhotoView } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">&#x27;react-photo-view&#x27;</span><span style="color:var(--shiki-color-text)">;</span></span>
22<span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">&#x27;react-photo-view/dist/react-photo-view.css&#x27;</span><span style="color:var(--shiki-color-text)">;</span></span>
23<span class="line"> </span>
24<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">App</span><span style="color:var(--shiki-color-text)">() {</span></span>
25<span class="line"><span style="color:var(--shiki-color-text)">  </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span>
26<span class="line"><span style="color:var(--shiki-color-text)">    &lt;</span><span style="color:var(--shiki-token-constant)">PhotoProvider</span><span style="color:var(--shiki-color-text)">&gt;</span></span>
27<span class="line"><span style="color:var(--shiki-color-text)">      &lt;</span><span style="color:var(--shiki-token-constant)">PhotoView</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">src</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">&quot;/1.jpg&quot;</span><span style="color:var(--shiki-color-text)">&gt;</span></span>
28<span class="line"><span style="color:var(--shiki-color-text)">        &lt;</span><span style="color:var(--shiki-token-string-expression)">img</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">src</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">&quot;/1-thumbnail.jpg&quot;</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">alt</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">&quot;&quot;</span><span style="color:var(--shiki-color-text)"> /&gt;</span></span>
29<span class="line"><span style="color:var(--shiki-color-text)">      &lt;/</span><span style="color:var(--shiki-token-constant)">PhotoView</span><span style="color:var(--shiki-color-text)">&gt;</span></span>
30<span class="line"><span style="color:var(--shiki-color-text)">    &lt;/</span><span style="color:var(--shiki-token-constant)">PhotoProvider</span><span style="color:var(--shiki-color-text)">&gt;</span></span>
31<span class="line"><span style="color:var(--shiki-color-text)">  );</span></span>
32<span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre><div class="nx-opacity-0 nx-transition [div:hover&gt;&amp;]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0">
32<button class="nextra-button nx-transition-all active:nx-opacity-50 nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5 dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50 md:nx-hidden" title="Toggle word wrap"><svg viewBox="0 0 24 24" width="24" height="24" class="nx-pointer-events-none nx-h-4 nx-w-4"><path fill="currentColor" d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="nextra-button nx-transition-all active:nx-opacity-50 nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5 dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50" title="Copy code" tabindex="0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="nextra-copy-icon nx-pointer-events-none nx-h-4 nx-w-4"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div>
33<p class="nx-mt-6 nx-leading-7 first:nx-mt-0">In this example, <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">react-photo-view</code> provides two components: <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">PhotoProvider</code> and <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">PhotoView</code>. With the <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">PhotoProvider</code> as the boundary, all the <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">PhotoView</code> images in it will be extracted as a set of image preview galleries in the running order. When an <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">&lt;img &gt;</code> is clicked, it will locate the specified image and open the preview.</p>
34<h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">features<a href="#features" id="features" class="subheading-anchor" aria-label="Permalink for this section"></a></h2>
35<p class="nx-mt-6 nx-leading-7 first:nx-mt-0">It has very perfect details and features:</p>
36<ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6">
37<li class="nx-my-2">Support touch gestures, drag and pan physical effect sliding, two-finger specified position to zoom in and out</li>
38<li class="nx-my-2">All aspects of animation connection, open and close the rebound touch edge, let the natural interaction effect</li>
39<li class="nx-my-2">The image is adaptive, with a suitable initial rendering size, and adapts according to the adjustment</li>
40<li class="nx-my-2">Support for custom previews like <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">&lt;video&gt;</code> or any <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">HTML</code> element</li>
41<li class="nx-my-2">Keyboard navigation, perfect for desktop</li>
42<li class="nx-my-2">Support custom node expansion, easy to achieve full-screen preview, rotation control, picture introduction and more functions</li>
43<li class="nx-my-2">Based on <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">typescript</code>, <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">7KB Gzipped</code>, supports server-side rendering</li>
44<li class="nx-my-2">Simple and easy to use <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">API</code>, zero cost to get started</li>
45</ul>
46<h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">About<a href="#about" id="about" class="subheading-anchor" aria-label="Permalink for this section"></a></h2>
47<p class="flex flex-wrap mt-6"><img alt="stars" src="https://badgen.net/github/stars/MinJieLiu/react-photo-view" class="mr-2 mb-2"/><img alt="version" src="https://img.shields.io/npm/v/react-photo-view.svg?style=flat-square" class="mr-2 mb-2"/><img alt="downloads" src="http://img.shields.io/npm/dm/react-photo-view.svg?style=flat-square" class="mr-2 mb-2"/><img alt="license" src="https://badgen.net/npm/license/react-photo-view" class="mr-2 mb-2"/><img alt="min" src="https://badgen.net/bundlephobia/min/react-photo-view?label=minified" class="mr-2 mb-2"/><img alt="gzip" src="https://badgen.net/bundlephobia/minzip/react-photo-view?label=gzip" class="mr-2 mb-2"/></p>
48<p class="nx-mt-6 nx-leading-7 first:nx-mt-0"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">react-photo-view</code> created by <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="https:github.comMinJieLiu">MinJieLiu</a></p>
49<div class="nextra-callout nx-overflow-x-auto nx-mt-6 nx-flex nx-rounded-lg nx-border nx-py-2 ltr:nx-pr-4 rtl:nx-pl-4 contrast-more:nx-border-current contrast-more:dark:nx-border-current nx-border-orange-100 nx-bg-orange-50 nx-text-orange-800 dark:nx-border-orange-400/30 dark:nx-bg-orange-400/20 dark:nx-text-orange-300"><div class="nx-select-none nx-text-xl ltr:nx-pl-3 ltr:nx-pr-2 rtl:nx-pr-3 rtl:nx-pl-2" style="font-family:&quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;">😄</div><div class="nx-w-full nx-min-w-0 nx-leading-7"><span>Click a Star to not get lost 👉 </span><a class="inline-block underline" href="https://github.com/MinJieLiu/react-photo-view" target="_blank"><p class="nx-mt-6 nx-leading-7 first:nx-mt-0">
49Star</p></a><span> Thanks for the support!</span></div></div>
50<ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6">
51<li class="nx-my-2"><a href="https://github.com/MinJieLiu" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">GitHub<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li>
52</ul>
53<h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">License<a href="#license" id="license" class="subheading-anchor" aria-label="Permalink for this section"></a></h2>
54<p class="nx-mt-6 nx-leading-7 first:nx-mt-0">Apache-2.0 © <a href="https://github.com/MinJieLiu" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">MinJieLiu<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></p><div class="nx-mt-16"></div></main></article></div><footer class="nx-bg-gray-100 nx-pb-[env(safe-area-inset-bottom)] dark:nx-bg-neutral-900 print:nx-bg-transparent"><div class="nx-mx-auto nx-flex nx-max-w-[90rem] nx-gap-2 nx-py-2 nx-px-4 nx-flex"><button title="Change language" class="nx-h-7 nx-rounded-md nx-px-2 nx-text-left nx-text-xs nx-font-medium nx-text-gray-600 nx-transition-colors dark:nx-text-gray-400 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50" id="headlessui-listbox-button-:R2bkm:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="nx-flex nx-items-center nx-gap-2"><svg viewBox="2 2 16 16" width="12" height="12" fill="currentColor"><path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd"></path></svg><span class="">English</span></span></button><button title="Change theme" class="nx-h-7 nx-rounded-md nx-px-2 nx-text-left nx-text-xs nx-font-medium nx-text-gray-600 nx-transition-colors dark:nx-text-gray-400 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50" id="headlessui-listbox-button-:R2jkm:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><div class="nx-flex nx-items-center nx-gap-2 nx-capitalize"><svg fill="none" viewBox="3 3 18 18" width="12" height="12" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span class="">Light</span></div></button></div><hr class="dark:nx-border-neutral-800"/><div class="nx-mx-auto nx-flex nx-max-w-[90rem] nx-justify-center nx-py-12 nx-text-gray-600 dark:nx-text-gray-400 md:nx-justify-start nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]"><a href="https://vercel.com/?utm_source=swr" target="_blank" rel="noopener" class="inline-flex items-center no-underline text-current font-semibold"><span class="mr-1">Powered by</span><span><svg height="20" viewBox="0 0 283 64" fill="none"><path fill="currentColor" d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 
540 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"></path></svg></span></a></div></footer></div></div>
54<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/index.en-US","query":{},"buildId":"Z2tuPYteLSvqJyhXRfrxm","nextExport":true,"autoExport":true,"isFallback":false,"locale":"en-US","locales":["zh-CN","en-US"],"defaultLocale":"zh-CN","scriptLoader":[]}</script>
54</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.