React Image Drag-and-Drop

A React component for composing images by dragging and dropping an overlay image on a background image.

Installation

npm i react-image-dnd-overlay

Usage

import React from 'react';
import ImageDnDOverlay from 'react-image-dnd-overlay';

const App = () => {
  
  const changePosition = (file: File, position: Position) => {
        //.....
    }

  return (
    <ImageDnDOverlay
                backgroundImage="https://example.com/background.jpg"
                overlayImage="https://example.com/overlay.png"
                onImageGenerated={changePosition}
                fileName='result'
                containerWidth={800}
                containerHeight={600}
                initialPosition={{x:50, y:50}}
            />
  );
};

export default App;

Props

export interface componentProps {
    backgroundImage: string | File // ссылка на фоновое изображение
    overlayImage: string | File // ссылка на передвигаемое изображение
    onImageGenerated?: (file: File, position: Position) => void // коллбек изменения положения
    initialPosition?: Position // начальная позиция overlay
    containerWidth?: number // ширина контейнера
    containerHeight?: number // высота контейнера
    containerStyle?: React.CSSProperties // стили контейнера
    backgroundStyle?: React.CSSProperties // стили для фона
    overlayStyle?: React.CSSProperties // стили для передвигаемого изображения
    fileName?: string // название итогового файла
}

License

MIT