react-avatar
👤 Load, crop and preview avatar with ReactJS component
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