react-imageslides

React Image Viewer

React-slides@3 has been rewriten with React Hooks and all apis of it have been redesigned. If you are using React-slides@2, please read api docs carefully.

Example

Features

• Support multi-touch and mouse gestures (powered by Alloyfinger)
• High performance(no unneccessary rendering)

Get Started

• Run yarn add react-imageslides react react-dom alloyfinger

  The package has peer dependencies on react@^17.0.0, react-dom@^17.0.0, and alloyfinger.

• Render it!

import React, { useState, useCallback } from 'react';
import ReactDOM from 'react-dom';
import Gallery from 'react-imageslides';
import 'react-imageslides/lib/index.css';

const images = [
  'http://dingyue.nosdn.127.net/0UDLpU6BsCNm9v9OpT0Dhn=nHKJFC6SMByz8bMWxFM=1t1531988836046compressflag.jpeg',
  'http://dingyue.nosdn.127.net/9sFTTWDQoHjxyIkU9wzm8CiDNVbq48Mwf2hyhgRghxA5O1527909480497compressflag.jpeg',
  'http://dingyue.nosdn.127.net/eSJPDtcP9NBvEOIMPyPLxwpJSZIu4D36qDss2RGQjNHBp1531990042001compressflag.jpeg',
  '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',
];
export default function App() {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleChange = useCallback(newIndex => {
    setActiveIndex(newIndex);
  }, []);
  return <Gallery isOpen images={images} index={activeIndex} onChange={handleChange} />;
}
ReactDOM.render(<App />, document.getElementById('root'));

Apis

Property	Type	Required	Description
images	array	yes	Image urls to display
onChange	func	yes	Callback fired when the index changes
isOpen	bool	yes	Whether the component is open
index	number	yes	Index of the first image to display
loadingIcon	node		Placeholder when image is loading
onClick	func		Callback fired when user clicks gallery
onKeyPress	func		Callback fired when user press down any key
onSingleTap	func		Callback fired when user taps gallery
imageRenderer	func		Render prop to custom image element