Chueasy React Slider
demo
https://swnumaster.github.io/chueasy_react_previewer/
https://demo.chueasy.com/chueasy_react_previewer
How to use
1. Install chueasy_react_previewer
npm install chueasy_react_previewer
or
yarn add chueasy_react_previewer
2. Write code as below:
import React, { useState } from 'react';
import { render } from 'react-dom';
import ChueasyPreviewer from '../src';
var imgUrl1 = require('../src/static/images/slider1.jpg'); // 模块化方式引用图片路径,这样引用的图片才可以打包进dist文件夹
var imgUrl2 = require('../src/static/images/slider2.jpg');
let imageList = [
{url: imgUrl1},
{url: imgUrl2}
];
const Demo = () => {
const [preview, setPreview] = useState({display: false, index: 0});
const onPreviewer = (index) => {
setPreview({display: true, index: index});
}
const onClose = () => {
setPreview({display: false, index: 0});
}
return (
<React.Fragment>
<div className='chueasy-previewer-test-wrapper'>
<img src={imageList[0].url} onClick={ () => onPreviewer(0) }/>
<img src={imageList[1].url} onClick={ () => onPreviewer(1) }/>
</div>
{ preview.display && <ChueasyPreviewer imageList={imageList} defaultIndex={preview.index} onClose={onClose}/>}
</React.Fragment>
);
}
Change log
v1.0.0 20210707 Publish the first version