👤 Load, crop & preview avatar with React




👤 Load, crop and preview avatar with ReactJS component

npm version


Demo website


npm i react-avatar-edit


import React from 'react'
import ReactDOM from 'react-dom'
import Avatar from 'react-avatar-edit'

class App extends React.Component {

  constructor(props) {
    const src = './example/einshtein.jpg'
    this.state = {
      preview: null,
    this.onCrop = this.onCrop.bind(this)
    this.onClose = this.onClose.bind(this)
    this.onBeforeFileLoad = this.onBeforeFileLoad.bind(this)
  onClose() {
    this.setState({preview: null})
  onCrop(preview) {

  onBeforeFileLoad(elem) {
    if(elem.target.files[0].size > 71680){
      alert("File is too big!");
      elem.target.value = "";
  render () {
    return (
        <img src={this.state.preview} alt="Preview" />

ReactDOM.render(<App /> , document.getElementById('root'))

Component properties

imgImageThe Image object to display
srcString/Base64The url to base64 string to load (use urls from your domain to prevent security errors)
widthNumberThe width of the editor
heightNumberThe height of the editor (image will fit to this height if neither imageHeight, nor imageWidth is set)
imageWidthNumberThe desired width of the image, can not be used together with imageHeight
imageHeightNumberThe desired height of the image, can not be used together with imageWidth
cropRadiusNumberThe crop area radius in px (default: calculated as min image with/height / 3)
cropColorStringThe crop border color (default: white)
lineWidthNumberThe crop border width (default: 4)
minCropRadiusNumberThe min crop area radius in px (default: 30)
backgroundColorStringThe color of the image background (default: white)
closeIconColorStringThe close button color (default: white)
shadingColorStringThe shading color (default: grey)
shadingOpacityNumberThe shading area opacity (default: 0.6)
mimeTypesStringThe mime types used to filter loaded files (default: image/jpeg,image/png)
labelStringLabel text (default: Choose a file)
labelStyleObjectThe style object for preview label (use camel case for css properties fore example: fontSize)
borderStyleObjectThe style for object border preview (use camel case for css properties fore example: fontSize)
onImageLoad(image)FunctionInvoked when image based on src prop finish loading
onCrop(image)FunctionInvoked when user drag&drop event stop and return cropped image in base64 string
onBeforeFileLoad(file)FunctionInvoked when user before upload file with internal file loader (etc. check file size)
onFileLoad(file)FunctionInvoked when user upload file with internal file loader
onClose()FunctionInvoked when user clicks on close editor button
exportAsSquareBooleanThe exported image is a square and the circle is not cut-off from the image
exportSizeNumberThe size the exported image should have (width and height equal). The cropping will be made on the original image to ensure a high quality.
exportMimeTypeStringThe mime type that should be used to export the image, supported are: image/jpeg, image/png (Default: image/png)
exportQualityNumberThe quality that should be used when exporting in image/jpeg. A value between 0.0 and 1.0.


  • To start developer server please use npm run start
  • To build production bundle use npm run build