Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
exif-react-avatar-edit
Advanced tools
👤 Load, crop and preview avatar with ReactJS component
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) {
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'))
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 |
npm run start
npm run build
FAQs
ReactJS component to upload, crop, and preview avatars
We found that exif-react-avatar-edit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.