Skip to content
πŸ‘€ Load, crop & preview avatar with React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs docs Dec 20, 2017
example fix default crop radius calculation Dec 13, 2018
src fix default crop radius calculation Dec 13, 2018
.babelrc update babel version to 7 Mar 10, 2019
.editorconfig
.gitignore Add iml to gitignore and re-add package-lock May 29, 2018
.npmignore remove unnecessary files from npm package Mar 10, 2019
LICENSE
README.md fix default crop radius calculation Dec 13, 2018
package-lock.json update babel version to 7 Mar 10, 2019
package.json remove unnecessary files from npm package Mar 10, 2019
webpack.dev.js Switch uglifyjs to newer version for compatiblity with webpack ^4.0. … May 29, 2018
webpack.example.js Switch uglifyjs to newer version for compatiblity with webpack ^4.0. … May 29, 2018
webpack.prod.js Switch uglifyjs to newer version for compatiblity with webpack ^4.0. … May 29, 2018

README.md

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

Prop Type Description
img Image The Image object to display
src String/Base64 The url to base64 string to load (use urls from your domain to prevent security errors)
width Number The width of the editor
height Number The height of the editor (image will fit to this height if neither imageHeight, nor imageWidth is set)
imageWidth Number The desired width of the image, can not be used together with imageHeight
imageHeight Number The desired height of the image, can not be used together with imageWidth
cropRadius Number The crop area radius in px (default: calculated as min image with/height / 3)
cropColor String The crop border color (default: white)
lineWidth Number The crop border width (default: 4)
minCropRadius Number The min crop area radius in px (default: 30)
backgroundColor Sting The color of the image background (default: white)
closeIconColor String The close button color (default: white)
shadingColor String The shading color (default: grey)
shadingOpacity Number The shading area opacity (default: 0.6)
mimeTypes String The mime types used to filter loaded files (default: image/jpeg,image/png)
label String Label text (default: Choose a file)
labelStyle Object The style object for preview label (use camel case for css properties fore example: fontSize)
borderStyle Object The style for object border preview (use camel case for css properties fore example: fontSize)
onImageLoad(image) Function Invoked when image based on src prop finish loading
onCrop(image) Function Invoked when user drag&drop event stop and return croped image in base64 sting
onBeforeFileLoad(file) Function Invoked when user before upload file with internal file loader (etc. check file size)
onFileLoad(file) Function Invoked when user upload file with internal file loader
onClose() Function Invoked when user clicks on close editor button

Contributing

  • To start developer server please use npm run start
  • To build production bundle use npm run build
You can’t perform that action at this time.