Skip to content

Commit

Permalink
fix: doc
Browse files Browse the repository at this point in the history
  • Loading branch information
MinJieLiu committed Feb 10, 2022
1 parent ca1a47b commit 8ea3764
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 4 deletions.
63 changes: 63 additions & 0 deletions example/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# react-photo-view

**一款超精致的图片预览方案**

[![npm](https://img.shields.io/npm/v/react-photo-view.svg?style=flat-square)](https://www.npmjs.com/package/react-photo-view)
[![react-photo-view](https://badgen.net/bundlephobia/minzip/react-photo-view)](https://github.com/MinJieLiu/react-photo-view)
[![react-photo-view](https://badgen.net/npm/dt/react-photo-view)](https://github.com/MinJieLiu/react-photo-view)

文档: [https://minjieliu.github.io/react-photo-view](https://minjieliu.github.io/react-photo-view)

## 特性

1. 滑动左右切换
2. 拖动预览
3. 物理减速
4. 双击放大/缩小
5. 双指放大/缩小/平移
6. 左右切换导航
7. 上/下滑关闭
8. 键盘导航
9. 旋转 API
10. 点击切换控件
11. 缩放动画
12. 自适应图像适应
13. 长图模式
14. 自定义元素预览
15. 支持桌面端(兼容 IE10+)/移动端
16. 基于 `typescript`
17. 6KB
18. 无依赖
19. 支持服务端渲染
20. 高扩展性

## 安装

```bash
yarn add react-photo-view
```

## 基本使用:

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

function ImageView() {
return (
<PhotoProvider>
<div>
<PhotoView src="/1.jpg">
<img src="/1-thumbnail.jpg" alt="" />
</PhotoView>
</div>

<div>
<PhotoView src="/2.jpg">
<img src="/2-thumbnail.jpg" alt="" />
</PhotoView>
</div>
</PhotoProvider>
);
}
```
2 changes: 2 additions & 0 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@
"scripts": {
"dev": "vite serve --host --force",
"build": "vite build",
"preview": "vite preview",
"deploy": "npm run build && gh-pages -d dist"
},
"devDependencies": {
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"@types/node": "^16.11.24",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"@types/styled-components": "^5.1.21",
Expand Down
2 changes: 1 addition & 1 deletion example/pages/$.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ title: 介绍
order: 1
---

import README from '../../README.md';
import README from '../README.md';

<README />
6 changes: 6 additions & 0 deletions example/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 9 additions & 3 deletions example/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,20 @@ import pages from 'vite-plugin-react-pages';
import pkg from './package.json';

export default defineConfig({
base: '/react-photo-view/',
server: {
fs: {
allow: ['..'],
},
},
optimizeDeps: {
include: Object.keys(pkg.dependencies),
},
plugins: [
mdx(),
react(),
pages({
pagesDir: path.join(__dirname, 'pages'),
}),
],
optimizeDeps: {
include: Object.keys(pkg.dependencies),
},
});

0 comments on commit 8ea3764

Please sign in to comment.