MCPcopy
hub / github.com/MinJieLiu/react-photo-view

github.com/MinJieLiu/react-photo-view @v1.2.1 sqlite

repository ↗ · DeepWiki ↗ · release v1.2.1 ↗
126 symbols 287 edges 73 files 3 documented · 2%
README

react-photo-view

中文 | English

一款超精致的图片预览组件

NPM version Downloads Minified size Gzip size

example

快速开始

特性

  • 支持触摸手势,拖动/平移/物理效果滑动,双指指定位置放大/缩小
  • 全方面动画衔接,打开/关闭/回弹/触边,顺其自然的交互效果
  • 图像自适应,以一个合适的最初呈现大小,并根据调整自适应
  • 支持自定义如 <video /> 或任意 HTML 元素的预览
  • 键盘导航,完美适配桌面端
  • 支持自定义节点扩展,轻松实现全屏预览、旋转控制、图片介绍以及更多功能
  • 基于 typescript7KB Gzipped,支持服务端渲染
  • 简单易用的 API,上手零成本

安装

yarn add react-photo-view

基本使用:

import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function App() {
  return (
    <PhotoProvider>
      <PhotoView src="https://github.com/MinJieLiu/react-photo-view/raw/v1.2.1/1.jpg">
        <img src="https://github.com/MinJieLiu/react-photo-view/raw/v1.2.1/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

License

Apache-2.0 © MinJieLiu

Extension points exported contracts — how you extend this code

ButtonProps (Interface)
(no doc)
packages/example/components/doc-components.tsx
PhotoViewProps (Interface)
(no doc)
packages/react-photo-view/src/PhotoView.tsx
IPhotoSliderProps (Interface)
(no doc)
packages/react-photo-view/src/PhotoSlider.tsx
IPhotoLoadedParams (Interface)
(no doc)
packages/react-photo-view/src/Photo.tsx
IPhotoProps (Interface)
(no doc)
packages/react-photo-view/src/Photo.tsx
PhotoContextType (Interface)
(no doc)
packages/react-photo-view/src/photo-context.ts

Core symbols most depended-on inside this repo

computePositionEdge
called by 8
packages/react-photo-view/src/utils/edgeHandle.ts
easeOutMove
called by 7
packages/react-photo-view/src/hooks/useScrollPosition.ts
useMethods
called by 7
packages/react-photo-view/src/hooks/useMethods.ts
changeIndex
called by 6
packages/react-photo-view/src/PhotoSlider.tsx
useEventListener
called by 6
packages/react-photo-view/src/hooks/useEventListener.ts
onScale
called by 5
packages/react-photo-view/src/PhotoBox.tsx
limitScale
called by 4
packages/react-photo-view/src/utils/limitTarget.ts
useSetState
called by 4
packages/react-photo-view/src/hooks/useSetState.ts

Shape

Function 111
Interface 15

Languages

TypeScript100%

Modules by API surface

packages/react-photo-view/src/PhotoBox.tsx12 symbols
packages/react-photo-view/src/PhotoSlider.tsx10 symbols
packages/react-photo-view/src/hooks/useScrollPosition.ts8 symbols
packages/react-photo-view/src/PhotoProvider.tsx8 symbols
packages/react-photo-view/src/types.ts5 symbols
packages/react-photo-view/src/PhotoView.tsx5 symbols
packages/react-photo-view/src/Photo.tsx5 symbols
packages/react-photo-view/src/hooks/useDebounceCallback.ts4 symbols
packages/react-photo-view/src/hooks/useAnimationOrigin.tsx3 symbols
packages/example/components/doc-toolbar.tsx3 symbols
packages/example/components/doc-controlled.tsx3 symbols
packages/example/components/doc-components.tsx3 symbols

Dependencies from manifests, versioned

@micro-web/microbundle0.14.3 · 1×
@types/node16.11.26 · 1×
@types/react17.0.39 · 1×
@types/react-dom17.0.11 · 1×
@umijs/fabric2.10.1 · 1×
autoprefixer10.4.2 · 1×
husky7.0.4 · 1×
less4.1.2 · 1×
lint-staged12.3.3 · 1×
mac-scrollbar0.9.6 · 1×
next12.0.8 · 1×
nextra2.0.0-alpha.24 · 1×

For agents

$ claude mcp add react-photo-view \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact