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 alloyfingerThe package has peer dependencies on
react@^17.0.0,react-dom@^17.0.0andalloyfinger. -
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 |