{"id":22355447,"url":"https://github.com/kirill3333/react-avatar","last_synced_at":"2025-05-15T13:08:38.436Z","repository":{"id":25800457,"uuid":"99361662","full_name":"kirill3333/react-avatar","owner":"kirill3333","description":"šŸ‘¤ Load, crop \u0026 preview avatar with React","archived":false,"fork":false,"pushed_at":"2024-04-02T15:03:33.000Z","size":3131,"stargazers_count":565,"open_issues_count":20,"forks_count":102,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-05T23:02:10.654Z","etag":null,"topics":["avatar","canvas","image","javascript","profile-picture","react","react-component"],"latest_commit_sha":null,"homepage":"http://kirill3333.github.io/react-avatar","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kirill3333.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-04T16:35:22.000Z","updated_at":"2025-04-02T08:22:46.000Z","dependencies_parsed_at":"2024-06-18T13:31:51.201Z","dependency_job_id":"37c92033-daef-4953-aafc-db45b7636c4b","html_url":"https://github.com/kirill3333/react-avatar","commit_stats":{"total_commits":124,"total_committers":21,"mean_commits":5.904761904761905,"dds":0.3548387096774194,"last_synced_commit":"2b9cb5f8aa6aff0c986b9f30c4e8c0ef76298807"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirill3333%2Freact-avatar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirill3333%2Freact-avatar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirill3333%2Freact-avatar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirill3333%2Freact-avatar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kirill3333","download_url":"https://codeload.github.com/kirill3333/react-avatar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254346624,"owners_count":22055808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avatar","canvas","image","javascript","profile-picture","react","react-component"],"created_at":"2024-12-04T14:06:32.523Z","updated_at":"2025-05-15T13:08:33.421Z","avatar_url":"https://github.com/kirill3333.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-avatar-edit\n\nšŸ‘¤ Load, crop and preview avatar with ReactJS component\n\n- Works from the box\n- Fully typed with TypeScript\n- Drag and Drop support\n- A lot of customization\n- Powered with KonvaJS\n\n\u003ca href=\"https://www.npmjs.com/package/react-avatar-edit\"\u003e\u003cimg alt=\"Downloads\" src=\"https://img.shields.io/badge/npm-react--avatar--edit-orange\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-avatar-edit\"\u003e\u003cimg alt=\"Downloads\" src=\"https://img.shields.io/npm/v/react-avatar-edit\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-avatar-edit\"\u003e\u003cimg alt=\"Downloads\" src=\"https://img.shields.io/npm/dm/react-avatar-edit\"\u003e\u003c/a\u003e\n\n## Demo\n\n![](https://media.giphy.com/media/3o7aD1fCeJxzNu2uYg/giphy.gif)\n\n## [Demo website](https://kirill3333.github.io/react-avatar/)\n\n## Install\n\n`npm i react-avatar-edit`\n\n## Usage\n\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Avatar from \"react-avatar-edit\";\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n const src = \"./example/einshtein.jpg\";\n this.state = {\n preview: null,\n src,\n };\n this.onCrop = this.onCrop.bind(this);\n this.onClose = this.onClose.bind(this);\n this.onBeforeFileLoad = this.onBeforeFileLoad.bind(this);\n }\n\n onClose() {\n this.setState({ preview: null });\n }\n\n onCrop(preview) {\n this.setState({ preview });\n }\n\n onBeforeFileLoad(elem) {\n if (elem.target.files[0].size \u003e 71680) {\n alert(\"File is too big!\");\n elem.target.value = \"\";\n }\n }\n\n render() {\n return (\n \u003cdiv\u003e\n \u003cAvatar\n width={390}\n height={295}\n onCrop={this.onCrop}\n onClose={this.onClose}\n onBeforeFileLoad={this.onBeforeFileLoad}\n src={this.state.src}\n /\u003e\n \u003cimg src={this.state.preview} alt=\"Preview\" /\u003e\n \u003c/div\u003e\n );\n }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\n## Component properties\n\n| Prop | Type | Description |\n| ---------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| img | Image | The Image object to display |\n| src | String/Base64 | The url to base64 string to load (use urls from your domain to prevent security errors) |\n| width | Number | The width of the editor |\n| height | Number | The height of the editor (image will fit to this height if neither imageHeight, nor imageWidth is set) |\n| imageWidth | Number | The desired width of the image, can not be used together with imageHeight |\n| imageHeight | Number | The desired height of the image, can not be used together with imageWidth |\n| cropRadius | Number | The crop area radius in px (default: calculated as min image with/height / 3) |\n| cropColor | String | The crop border color (default: white) |\n| lineWidth | Number | The crop border width (default: 4) |\n| minCropRadius | Number | The min crop area radius in px (default: 30) |\n| backgroundColor | String | The color of the image background (default: white) |\n| closeIconColor | String | The close button color (default: white) |\n| shadingColor | String | The shading color (default: grey) |\n| shadingOpacity | Number | The shading area opacity (default: 0.6) |\n| mimeTypes | String | The mime types used to filter loaded files (default: image/jpeg,image/png) |\n| label | String | Label text (default: Choose a file) |\n| labelStyle | Object | The style object for preview label (use camel case for css properties fore example: fontSize) |\n| borderStyle | Object | The style for object border preview (use camel case for css properties fore example: fontSize) |\n| onImageLoad(image) | Function | Invoked when image based on src prop finish loading |\n| onCrop(image) | Function | Invoked when user drag\u0026drop event stop and return cropped image in base64 string |\n| onBeforeFileLoad(file) | Function | Invoked when user before upload file with internal file loader (etc. check file size) |\n| onFileLoad(file) | Function | Invoked when user upload file with internal file loader |\n| onClose() | Function | Invoked when user clicks on close editor button |\n| exportAsSquare | Boolean | The exported image is a square and the circle is not cut-off from the image |\n| 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. |\n| exportMimeType | String | The mime type that should be used to export the image, supported are: image/jpeg, image/png (Default: image/png) |\n| exportQuality | Number | The quality that should be used when exporting in image/jpeg. A value between 0.0 and 1.0. |\n\n## Contributing\n\n- To start developer server please use `npm run start`\n- To build production bundle use `npm run build`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirill3333%2Freact-avatar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkirill3333%2Freact-avatar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirill3333%2Freact-avatar/lists"}