react preview plugin
一个React集成PhotoSwipe的移动端与PC端图片预览插件
Demo
Requirements
Installation
npm i react-img-preview -S
Usage
Import plugin
Examples
import React from 'react'import ReactDOM from 'react-dom'// 导入预览组件import Preview from 'react-img-preview' // 专门用于测试的组件Component { thisstate = // 所有要进行预览的图片 // 每一个图片对象,都要包含如下三个属性:{src, w, h} // 其中: // src 是图片的地址 // w 是图片预览时候的宽度 // h 是图片预览时候的高度 items: src: 'https://placekitten.com/600/400' w: 600 h: 400 src: 'https://placekitten.com/1200/900' w: 1200 h: 900 } { return <div> <Preview // 【必填】指定 要预览的图片数组 = // 【 可选】设置 缩略图容器的样式 = // 【 可选】设置 缩略图的样式 => </Preview> </div> } // 把 虚拟DOM挂载到页面上ReactDOM
API
属性 | 类型 | 作用 |
---|---|---|
imglist | Array数组,必填 | 指定需要进行预览时候的图片数组; 数组中每个图片信息,都应该是包含如下三个属性的对象 例如: {src: '图片地址', w: 宽度值, h: 高度值} |
previewBoxStyle | Object对象,可选 | 设置缩略图外层容器div的style样式 |
thumbImgStyle | Object对象,可选 | 设置每个缩略图的style样式,默认每张图片宽高各为 100px、且有 10px 的 margin |
Quick Start
可以直接clone
源代码,npm install
安装依赖包,运行 npm run dev
快速查看项目效果!
git clone git@github.com:daidaitu1314/react-img-preview.git
- cd 到项目根目录运行
npm install
npm run dev
快速启动