A combined implementation of react-dropzone and react-cropper (translated to farsi)


000.4.64 years ago4 years agoMinified + gzip package size for @lahzenegar/react-drop-n-crop in KB



A combined implementation of react-dropzone and react-cropper (Cropper.js) for front-end image upload/validation/cropping.

npm version react-drop-n-crop dependencies react-drop-n-crop peer dependencies


A demo is available at https://synapsestudios.github.io/react-drop-n-crop/


Installing via CLI

// yarn
yarn add @synapsestudios/react-drop-n-crop

// npm
npm install --save @synapsestudios/react-drop-n-crop

Importing JS

import DropNCrop from '@synapsestudios/react-drop-n-crop';

Importing CSS

// Minified, autoprefixed css
import '@synapsestudios/react-drop-n-crop/lib/react-drop-n-crop.min.css';

// Not-minified, not-autoprefixed css
import '@synapsestudios/react-drop-n-crop/lib/react-drop-n-crop.css';

Using Stylus

If you are using Stylus you can import the .styl file into your build:

@import '@synapsestudios/react-drop-n-crop/lib/react-drop-n-crop.styl';

! See the Stylus Variables section below for variables/details.

Using with an ES6 Class and React Component State

import React, { Component } from 'react';
import DropNCrop from '@synapsestudios/react-drop-n-crop';
import '@synapsestudios/react-drop-n-crop/lib/react-drop-n-crop.min.css';

class SetStateExample extends Component {
  state = {
    result: null,
    filename: null,
    filetype: null,
    src: null,
    error: null,

  onChange = value => {

  render() {
    return <DropNCrop onChange={this.onChange} value={this.state} />;

export default SetStateExample;


Required Props

DropNCrop is built as a controlled component. The following props must be supplied to the component:

onChange: (required)

onChange is the callback function invoked when an image is dropped or cropped. onChange returns an object (in the shape of value below).

onChange: PropTypes.func.isRequired,

value: (required)

value is the object passed back from the onChange function. It must be in the following shape:

value: PropTypes.shape({
  result: PropTypes.string, // Resulting DataURL from Cropper.js crop box
  filename: PropTypes.string, // Original filename from uploaded file
  filetype: PropTypes.string, // Original MIME type from uploaded file
  src: PropTypes.string, // Original DataURL from the FileReader.result
  error: PropTypes.string, // Error returned from fileSize/fileType validators

Optional Props


canvasHeight is a string for the container inline style height property.

canvasHeight: PropTypes.string, // default: '360px'


canvasWidth is a string for the container inline style width property.

canvasWidth: PropTypes.string, // default: '100%'


className is a string for the outermost container class name.

className: PropTypes.string, // default: ''


cropperOptions is an object for customizing the cropper component. Lists of available options can be found here: https://github.com/roadmanfong/react-cropper

cropperOptions: PropTypes.object, // default: {guides: true, viewMode: 0, autoCropArea: 1}


maxFileSize is a maximum number (in bytes) for file upload validation.

maxFileSize: PropTypes.object, // default: 3145728


allowedFileTypes is an array (of strings) of valid MIME types for file upload validation.

allowedFileTypes: PropTypes.array, // default: ['image/jpeg', 'image/jpg', 'image/png']

Stylus Variables

react-drop-n-crop comes with a set of stylus variables that can be overridden to add your own project-specific theming, as shown below:

/* Theming by overriding default stylus variables with your projects colors */

$drop-n-crop--primary-color = $your-project-primary-color;
$drop-n-crop--error-color = $your-project-error-color;

$drop-n-crop--body-color = $your-project-body-color;
$drop-n-crop--heading-color = $your-project-heading-color;

$drop-n-crop--input-background-color = $your-project-background-color;
$drop-n-crop--input-border-color = $your-project-border-color;

@import '@synapsestudios.com/react-drop-n-crop/css/react-drop-n-crop.styl';


To run the project on your own computer:

  • Clone this repository
  • yarn install or npm install
  • yarn run storybook or npm run storybook
  • Visit http://localhost:5000/
  • Changes made to files in the src directory should immediately compile and be visible in your browser.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.