react-full-gallery v1.2.8

React Full Gallery

A react image gallery with upload, edit, remove images.

Installation

In your project directory, run:

npm install react-full-gallery

Demo

Here are the demos of some features like inserting image from unsplash and editing images.

Insert image from local

Insert image from Unsplash

Edit Image

How to use

import ImageGallery from 'react-full-gallery';

<ImageGallery 
    images={images}
    targetId='image-gallery'
    formTargetId='image-gallery-upload-form' 
    note={'Images only, up to 2 MB'}
    remoteSources={['Dropbox', 'Facebook', 'GoogleDrive','Instagram', 'OneDrive', 'Unsplash', 'Url']}
    loading={loading}
    allowMultipleEdit={allowMultipleEdit}
    allowMultipleDelete={allowMultipleDelete}
    handleUploadImages={handleUploadImages} 
    handleUpdateImages={handleUpdateImages}
    handleRemoveImages={handleRemoveImages} 
    companionUrl='http://localhost:55728/companion'
/>

Types

type UppyFileType = UppyFile<Record<string, unknown>, Record<string, unknown>>;

Interfaces

interface FilesInterface {
    [key: string]: UppyFileType;
}

interface ImageInterface {
    // Id of the image.
    id: string;
    // Original URL of the image.
    originalUrl: string;
    // Preview URL of the image which is used for image gallery to show the images. If set to undefined, the originalUrl will be used.
    previewUrl?: string;
    // Name of the image.
    name: string;
    // How many times the image is used in your website/content/etc.
    numberOfUse?: number;
    // The filed is used to know if the image was edited by the user or not.
    modified?: boolean;
}

interface ImageGalleryInterface {
    // Companion handles the server-to-server communication between your server and file storage providers such as Google Drive, Dropbox, etc. Read more here: https://uppy.io/docs/companion/
    companionUrl: string;
    // List of the image providers.
    remoteSources?: ('Box' | 'Dropbox' | 'Facebook' | 'GoogleDrive' | 'Instagram' | 'OneDrive' | 'Unsplash' | 'Url' | 'Zoom')[];
    // Target id of the image gallery HTML element.
    targetId: string;
    // Target id of the image gallery form HTML element.
    formTargetId: string;
    // Target id of the image gallery dropzone HTML element.
    dropTargetId?: string;
    // Height of the image gallery.
    height?: number;
    // Some custom tips/notes for your users
    note: string;
    // Style of the image gallery.
    style?: React.CSSProperties;
    // An array of your images.
    images: ImageInterface[];
    // Max allowed size for each image.
    maxFileSize?: number;
    // Allowed types for images.
    allowedFileTypes?: string[];
    // Loading state.
    loading?: boolean;
    // Allow multiple edit.
    allowMultipleEdit?: boolean;
    // Allow multiple delete.
    allowMultipleDelete?: boolean;
    // Your custom logic before adding an image.
    onBeforeFileAdded?: (currentImage: UppyFileType, images: FilesInterface) => UppyFileType | undefined | boolean;
    // Your custom logic before uploading images.
    onBeforeUpload?: (images: FilesInterface) => FilesInterface | boolean;
    // Your upload handler.
    handleUploadImages: (newImages: ImageInterface[]) => Promise<void>;
    // Your update handler.
    handleUpdateImages: (modifiedImages: ImageInterface[]) => Promise<void>;
    // Your remove handler.
    handleRemoveImages: (removedImages: ImageInterface[], newImages: ImageInterface[]) => Promise<void>;
}