Skip to content
Aiming to be a complete solution for avatar cropping in react.
Branch: master
Clone or download
BabbagesCabbages Merge pull request #32 from samuelcp/fix-style-bug
Change track width to percentage to fix overflow width on FF
Latest commit 8c939df Jan 21, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist build process stuff. Jun 13, 2015
example Version bump to 0.1.3 Oct 7, 2016
.gitignore Change track width to percentage to fix overflow width on FF Aug 17, 2017
.npmignore build process stuff. Jun 13, 2015 Add License File. Jan 9, 2016 add ghpages-deploy script Jun 12, 2015
package.json Version bump to 0.1.3 Oct 7, 2016
webpack.config.demo.js remove demo for now, add example webpack build. Jun 11, 2015
webpack.config.js build process stuff. Jun 13, 2015
webpack.config.production.js react 0.14 fix Oct 13, 2015


Reviewed by Hound

React Avatar Cropper aims to be an out of the box solution to solve the avatar cropping problem for 99% of common use cases. Most of the time you want a modal to pop up, allow the user to crop their uploaded image, and then you want to receive that base64 data to display and send to the server. React Avatar Cropper takes care of this use case.

Taking heavy inspiration from slack's and facebook's user photo cropper, react-avatar-cropper is here to make it easy.


There is a demo on


In your project

npm install --save react-avatar-cropper

react-avatar-cropper also depends on react obviously :) and react-bootstrap for modal functionality. To install run the following.

npm install --save react
npm install --save react-bootstrap


Usage is fairly simple, you can check the /example folder on github for a slightly more complex use case (the use case you see above in the demo). AvatarCropper simple takes a width and a height to determine what size avatar you would like. AvatarCropper then takes an image property where you can pass an external image, a user uploaded data URI or whatever you would like. An onRequestHide function is passed to the underlying modal so you can decide how to dismiss the modal. Lastly onCrop callback function is required, and gives you back the cropped Image, for you to do with as you wish.

// require the component...
var AvatarCropper = require("react-avatar-cropper");

// and in the render function of wherever you please...
render: function() {
  return (


There is an example of this common use case on the page for this plugin. Most importantly we pass the cropped DataURI back through your provided onCrop function.

Check out for more examples and info.


Feel free to place issues on the issue tracker or place a pull request regarding any functionality. I would like to keep this package limited to providing a great solution for the wide 99% use case that people have for avatar croppers.

Thanks for looking! <3

You can’t perform that action at this time.