Fork me on GitHub

React Avatar Cropper

The end all solution for avatar cropping functionality in React.js

Learn more »

Demo

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.

Try it out

Installation

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

Now that you have it installed, make sure you have the bootstrap javascript and css loaded, and require it into into your javascript to start building components with it :)

For ES6
import AvatarCropper from "react-avatar-cropper";
For ES5
var AvatarCropper = require("react-avatar-cropper");

Usage

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.

render: function() {
  return (
    <AvatarCropper
      onRequestHide={this.handleRequestHide}
      onCrop={this.handleCrop}
      image={this.state.img}
      width={400}
      height={400}
    />
  );
}

Contributing and
Direction

Feel free to fork and pull request for anything you would like. Contributions are greatly appreciated. There are a few main long term goals I would like to put out there to solidify the overall direction of the project.

Long Term Goals

  • Removing react-bootstrap as a dependency.
  • Customizable Modal Template
  • Testing coverage would be nice, I would like to aim for 100% coverage of well written tests.
  • Cross Browser Compatibility
  • Mobile Support

Things that are out of scope

  • Highly Custom Situations are out of scope, I want to handle the 99% use case really well and not worry about the 1%, those cases would be better served by a custom solution anyway.
  • For now other forms of interaction are out of scope. I would like to keep the interaction as a modal that handles the cropping and returns the cropped image. I feel like this is 99% use case both for large scale web apps and rapidly prototyped sites.