An image cropper for Ant Design Upload

English | 简体中文

pnpm add antd-img-crop
# or
yarn add antd-img-crop
# or
npm i antd-img-crop

import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';

const Demo = () => (
  <ImgCrop>
    <Upload>+ Add image</Upload>
  </ImgCrop>
);

If you use babel-plugin-import and no Modal or Slider were imported, please import the styles manually:

import 'antd/es/modal/style';
import 'antd/es/slider/style';

If using craco-antd, please try to add libraryDirectory: 'es' to craco.config.js:

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        // other options...
+       babelPluginImportOptions: {
+         libraryDirectory: 'es',
+       },
      },
    },
  ],
};

Or if configuring babel-plugin-import manually, please try to set libraryDirectory: 'es' to .babelrc.js:

module.exports = {
  plugins: [
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
  ],
};

MIT License (c) nanxiaobei

Try FUTAKE in WeChat. A mini app for your inspiration moments. 🌈