react-image-drag-n-drop v1.0.1

react-image-drag-n-drop

This package accepts an array of image urls and then gives you the ability to re-order the images by dragging and dropping.

Install

$ npm install react-image-drag-n-drop --save

Usage

    import React, { useState } from 'react'
    import react-image-drag-n-drop from 'react-image-drag-n-drop';

    function RenderImage(){
        const [images, setImage] = useState(['imageUrl1', 'imageUrl2', 'imageUrl3'])
        function handleImageSwitch(response){
            //do stuff with response
        }
        return (
            <div>
                <react-image-drag-n-drop
                    images={images}
                    styles={{
                        width: '100px',
                        height: '100px'
                    }}
                    opacity={0.5}
                    onDragFinish={handleImageSwitch}
                    customImageClass={['className 1','className 2']}
                    customWrapperClass={['className 1','className 2']}
                />
            </div>
        )
    }

Returned Reponse

    {
        draggedFile: {
          index: 1,
          src: 'imageUrl'
        },
        replacedFile: {
          index: 3,
          src: 'imageUrl'
        }
      }
    }

Required Props

images(Array)

Optional Props

onDragFinish(function)
styles(object)
customWrapperClass(array of class names)
customImageClass(array of class names)