# react-avatar-controller
> ReactJS component to upload, crop, and preview avatars
Latest version **1.0.4** (published 2022-07-21) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-avatar-controller
pnpm add react-avatar-controller
yarn add react-avatar-controller
bun add react-avatar-controller
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-07-21 |
| First published | 2022-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 220.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ilya Leykin |
| Maintainers | imleykin |
| Keywords | avatar, react, canvas |
## Links
- npm: https://www.npmjs.com/package/react-avatar-controller
- Repository: https://github.com/imleykin/react-avatar
- Homepage: https://github.com/imleykin/react-avatar#readme
- Issues: https://github.com/imleykin/react-avatar/issues
- npm.io page: https://npm.io/package/react-avatar-controller
## Dependencies (3)
- [konva](https://npm.io/package/konva.md) ^8.3.5
- [exif-js](https://npm.io/package/exif-js.md) ^2.3.0
- [blueimp-load-image](https://npm.io/package/blueimp-load-image.md) ^5.14.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.0.4 (latest) — 2022-07-21
- 1.0.3 — 2022-07-21
- 1.0.2 — 2022-07-21
- 1.0.1 — 2022-07-19
- 1.0.0 — 2022-07-19
## README
# react-avatar
👤 Load, crop and preview avatar with ReactJS component
## Install
```npm i react-avatar-edit```
## Usage
```javascript
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 (
)
}
}
ReactDOM.render( , 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 | String | The color of the image background (default: white)
| closeIconColor | String | The close button color (default: white)
| closeIcon | ReactNode | A custom close button icon
| closeButtonStyle | Object | The style object for close button
| 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)
| containerClassname | string | The container classname
| onImageLoad(image) | Function | Invoked when image based on src prop finish loading
| onCrop(image) | Function | Invoked when user drag&drop event stop and return cropped image in base64 string
| 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
| exportAsSquare | Boolean | The exported image is a square and the circle is not cut-off from the image
| exportSize | Number | The size the exported image should have (width and height equal). The cropping will be made on the original image to ensure a high quality.
| exportMimeType | String | The mime type that should be used to export the image, supported are: image/jpeg, image/png (Default: image/png)
| exportQuality | Number | The 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```
---
_Source: https://npm.io/package/react-avatar-controller · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._