Introduction

A React component by which you can previewing images easily.
Demo: https://swnumaster.github.io/react-img-previewer/
Author: Nathan Jiang ([email protected])

Installation

npm install react-img-previewer

Usage

    import React from 'react';
    import { render } from 'react-dom';
    import ReactImgPreviewer from 'react-img-previewer';

    let imageList = [
        {url: "https://www.fb.com/image1.jpg"},
        {url: "https://www.fb.com/image2.jpg"}
    ];

    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 && <ReactImgPreviewer imageList={imageList} defaultIndex={preview.index} onClose={onClose}/>}
            </React.Fragment>
        );
    }

Change log

v1.0.2

    change webpack4 to webpack5 and remove url-loader, file-loader, svg-url-loader
    upgrade other packages for development

v1.0.1

    ignore unecessary files