images

React component for image displaying in full screen

Apr 04, 2020
React component for image displaying in full screen

React Image Viewer

A mobile friendly images slideshow react component.

React-Image-Viewer

View Demo View Github

Features

  • Close to the native experience(powered by Alloyfinger)
  • Pinch to zoom in/out
  • No unnecessary rendering( the component only renders no more than 3 images at a time)
  • Support touch and mouse events both

Get Started

  1. Run yarn add react-imageslides react react-dom
    The package has peer dependencies on [[email protected]](/cdn-cgi/l/email-protection)^16.3.0, [[email protected]](/cdn-cgi/l/email-protection)^16.3.0, and alloyfinger.

  2. 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

PropertyTypeDefaultRequiredDescription
addonfuncDisplay extra content of the image (addon must return a react node)
showPageButtonboolfalseDisplay page buttons
imagesarrayyesImage urls to display
isOpenboolfalseWhether the component is open
indexnumber0Index of the first image to display
loadingIconfunc | nodeThe component displayed when the image is loading
noTapCloseboolfalseIf true, the close event will not be triggered by single tap.
onClosefuncCallback fired when the component closes
onChangefuncCallback fired when the index changes

GitHub

Recommended