chueasy_react_previewer v1.0.4

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