React Image Viewer
A mobile friendly images slideshow react component
Example
Features
- Close to the native experience(use Alloyfinger)
- Pinch to zoom in/out
- No unnecessary rendering( the component only renders no more than 3 images at a time)
Get Started
-
Run
yarn add react-imageslides react react-domThe package has peer dependencies onreact@^16.0.0,[email protected], andalloyfinger. -
Render it!
import React from 'react'; import ReactDOM from 'react-dom'; import ImageSlides from 'react-imageslides'; const images = [ 'http://dingyue.nosdn.127.net/lXMRCRbP9PYbv2gMBmHGXRnjspn6pT1PM5DrIGcEZSUTu1531904526913compressflag.jpeg', 'http://dingyue.nosdn.127.net/9sFTTWDQoHjxyIkU9wzm8CiDNVbq48Mwf2hyhgRghxA5O1527909480497compressflag.jpeg', 'http://img.zcool.cn/community/0101f856cfff206ac7252ce6214470.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503235534249&di=4c198d5a305627d12e5dae4c581c9e57&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2Fanime%2F0529%2F0529-17277.jpg', ]; ReactDOM.render(<ImageSlides images={images} isOpen />, document.getElementById('root'));Apis
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| addon | func | Display extra content of the image (addon must return a react node) | ||
| showPageButton | bool | false | Display page buttons | |
| images | array | yes | Image urls to display | |
| isOpen | bool | false | Whether the component is open | |
| index | number | 0 | Index of the first image to display | |
| loadingIcon | func | node | The component displayed when the image is loading | ||
| noTapClose | bool | false | If true, the close event will not be triggered by single tap. | |
| onClose | func | Callback fired when the component closes | ||
| onChange | func | Callback fired when the index changes |
