@synapsestudios/react-drop-n-crop
A combined implementation of react-dropzone and react-cropper (Cropper.js) for front-end image upload/validation/cropping.
Demo
A demo is available at https://synapsestudios.github.io/react-drop-n-crop/
Usage
Installing via CLI
// yarn
yarn add @synapsestudios/react-drop-n-crop
// npm
npm install --save @synapsestudios/react-drop-n-cropImporting 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 => {
this.setState(value);
};
render() {
return <DropNCrop onChange={this.onChange} value={this.state} />;
}
}
export default SetStateExample;API
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
}).isRequired,Optional Props
canvasHeight:
canvasHeight is a string for the container inline style height property.
canvasHeight: PropTypes.string, // default: '360px'canvasWidth:
canvasWidth is a string for the container inline style width property.
canvasWidth: PropTypes.string, // default: '100%'className:
className is a string for the outermost container class name.
className: PropTypes.string, // default: ''cropperOptions:
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:
maxFileSize is a maximum number (in bytes) for file upload validation.
maxFileSize: PropTypes.object, // default: 3145728allowedFileTypes:
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';Contributing
To run the project on your own computer:
- Clone this repository
yarn installornpm installyarn run storybookornpm run storybook- Visit http://localhost:5000/
- Changes made to files in the
srcdirectory should immediately compile and be visible in your browser.