antd-react-cropper

Image cropper using Ant Design and React Cropper

Demo

Install

yarn add antd-react-cropper

Usage

import React, { useState } from 'react';
import { Upload } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import ImageCropper from 'antd-react-cropper';
import { UploadFile } from 'antd/lib/upload/interface';
import 'antd/dist/antd.css';

const ImageUploadInput = () => {
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [file, setFile] = useState<UploadFile>();

  return (
    <>
      <Upload
        multiple={false}
        listType="picture-card"
        accept="image/*"
        showUploadList={{ showPreviewIcon: false }}
        fileList={fileList}
        beforeUpload={() => false}
        onChange={(info) => {
          if (info.fileList.length <= 0) {
            setFileList(info.fileList);
            return;
          }
          const file = info.fileList[info.fileList.length - 1];
          setFile(file);
        }}
      >
        <div>
          <PlusOutlined />
          <div style={{ marginTop: 8 }}>Upload</div>
        </div>
      </Upload>
      {file && (
        <ImageCropper
          file={file}
          aspect={16 / 9}
          onCropped={(file) => {
            setFileList([file]);
          }}
        />
      )}
    </>
  );
};

Props

| Props | Type | Default | Description | | --- | --- | --- | --- | | file | UploadFile | - | antd/lib/upload/UploadFile | | aspect | number | - | 16 / 9 | | cropperStyle | React.CSSProperties | - | - | | cropperClassName | string | - | - | | cropText | string | Crop | - | | cancelText | string | Cancel | - | | onCropped | (file: UploadFile) => void | - | - | | onCancel | () => void | - | - | | previewMaxHeight | number | 150 | - | | previewBackground | string | rgba(212, 212, 216) | - | | previewClassName | string | - | - | | previewStyle | React.CSSProperties | - | - | | title | React.ReactNode | - | AntD Modal props | | zIndex | number | - | AntD Modal props | | centered | boolean | - | AntD Modal props | | closable | boolean | - | AntD Modal props | | maskClosable | boolean | - | AntD Modal props | | width | number | 500 | AntD Modal props | | bodyStyle | React.CSSProperties | - | AntD Modal props | | zoomInButton | (onZoom) => React.ReactNode | - | Custom zoom in button | | zoomOutButton | (onZoom) => React.ReactNode | - | Custom zoom out button | | rotateLeftButton | (onRotate) => React.ReactNode | - | Custom rotate left button | | rotateRightButton | (onRotate) => React.ReactNode | - | Custom rotate right button | | customFooter | ({ onCrop, onCancel }) => React.ReactNode | - | Custom modal footer | | showLoader | boolean | true | show antd Message.loading | | exportFileType | string | image/jpeg | Cropped image file type |