React Image Picker

A useful image picker for your react.js/next.js projects :)

Documentation

Install

To install react-image-picker, you can use this command in you project's directory:

npm install --save @abak/react-image-picker

Usage

To use image picker in simplest approach:

const Component = () => {
  const [selectedFiles, setSelectedFiles] = useState[]);

  return (
    <ImagePicker
        files={selectedFiles}
        onFilesChange={setSelectedFiles}
        onChange={(files) => {}} //optional
    />
  )
}

To use image picker with Drag and Drop:

const Component = () => {
  const [selectedFiles, setSelectedFiles] = useState[]);

  return (
    <ImagePicker
        draggable
        files={selectedFiles}
        onFilesChange={setSelectedFiles}
    />
  )
}

If you wanna show images those already exist:

const Component = () => {
  const [selectedFiles, setSelectedFiles] = useState[]);
  const [images, setImages] = useState([]);

  return (
    <ImagePicker
        draggable
        files={selectedFiles}
        onFilesChange={setSelectedFiles}
        images={images}
        onRemoveImage={onRemoveImageHandler}
    />
  )
}

etc...

Options

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | files | Array of File | Required. To store selected files. | | onFilesChange | Func | Required. A function that calls when new file selected. | | locale | Locale or string | To change locale or change the texts used in interface. | | rtl| boolean | To set direction, if locale is set on fa, the rtl will set true default. | | showPreview| boolean | To set show preview of images. | | multiple| boolean | To multiple selection. | | limit| number | To set limits on the number of displays and selection of images.| | uploadAction| string | The URL of the action that auto upload uses to upload the image, Required IF the uploadOnSelect is set.| | uploadAxiosOptions| AxiosRequestConfig | The axios configs that uploader will uses for axios uploader.| | uploadHandler| IUploadHandler | Custom handler to perform uploading.| | images| IImagePickerImage[] | List of image object that have id, path and name(optional).| | onRemoveImage| (image: IImagePickerImage) => void | When an image of images is removed, this func will be called.| | onChange| (files: File[]) => void | This func will be called when a new image is selected.|

IUploadHandler

(file: File, fileID: string, options: {
    setProgress: (progress: number) => void;
    done: () => void;
    fail: () => void;
    cancel: () => void;
}) => Promise<any> | any

IImagePickerImage

{
    id: string | number;
    path: string;
    name?: string;
}

Contributing

Contributions are always welcome!

License

MIT