rae

react-avatar-edit

👤 Load, crop & preview avatar with React

Showing:

Popularity

Downloads/wk

10.2K

GitHub Stars

429

Maintenance

Last Commit

12d ago

Contributors

17

Package

Dependencies

3

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Readme

react-avatar

👤 Load, crop and preview avatar with ReactJS component

npm version

Demo

Demo website

Install

npm i react-avatar-edit

Usage

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

class App extends React.Component {

  constructor(props) {
    super(props)
    const src = './example/einshtein.jpg'
    this.state = {
      preview: null,
      src
    }
    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) {
    this.setState({preview})
  }

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

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

Component properties

PropTypeDescription
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.

Contributing

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial